mohammedsaid18/dashboard
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Responsive app

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-03 14:57:49 +03:00
الأصل 4a9915a6b7
التزام 56eb562193
10 ملفات معدلة مع 190 إضافات و132 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

18
src/components/DashboardGrid.tsx
عرض الملف

@@ -333,7 +333,7 @@ export default function DashboardGrid() {
const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => { const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => {
return ( return (
<div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-[32%]" <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-full lg:w-[32%] py-2 lg:py-0"
onMouseEnter={() => { onMouseEnter={() => {
if (tooltipText) { if (tooltipText) {
setIsHovered(true) setIsHovered(true)
@@ -344,12 +344,12 @@ export default function DashboardGrid() {
setIsHovered(false) setIsHovered(false)
} }
}}> }}>
<img src={icon} alt="Active Keywords" className="w-14 h-14" /> <img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />
<div className="flex flex-col px-4"> <div className="flex flex-col px-2 sm:px-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-2xl text-gray-500 font-bold">{value}</span> <span className="text-xl sm:text-2xl text-gray-500 font-bold">{value}</span>
{tooltipText && <div className="relative"> {tooltipText && <div className="relative">
{/* <Info size={16} className="text-gray-800 cursor-pointer" /> */} {/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
@@ -364,9 +364,9 @@ export default function DashboardGrid() {
)} )}
</div>} </div>}
</div> </div>
<div className="text-lg text-gray-500 ">{title}</div> <div className="text-sm sm:text-base lg:text-lg text-gray-500 ">{title}</div>
<div className="text-lg text-gray-500 flex items-center gap-2"> <div className="text-sm sm:text-base lg:text-lg text-gray-500 flex items-center gap-2">
<span className="text-lg text-gray-500 font-bold">{valueChange}</span> <span className="text-sm sm:text-base lg:text-lg text-gray-500 font-bold">{valueChange}</span>
</div> </div>
</div> </div>
@@ -382,8 +382,8 @@ export default function DashboardGrid() {
<HeaderPage title="Dashboard" /> <HeaderPage title="Dashboard" />
{/* Main content area with new metric cards */} {/* Main content area with new metric cards */}
<main className="pb-4 px-2 border-collapse border-2 mb-6 rounded-lg"> <main className="pb-4 px-2 sm:px-4 border-collapse border-2 mb-6 rounded-lg">
<div className="flex flex-wrap gap-4 lg:flex-row flex-col justify-between items-center py-4 px-4"> <div className="flex flex-col lg:flex-row flex-wrap gap-4 justify-between items-stretch py-4 px-2 sm:px-4">
<CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} /> <CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} />
<CardHeader title="Total Backlinks" value="112/1012" icon={TotalBacklinks} /> <CardHeader title="Total Backlinks" value="112/1012" icon={TotalBacklinks} />
<CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." /> <CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." />

10
src/components/Strategy/ProgressMetrics.tsx
عرض الملف

@@ -16,7 +16,7 @@ function ProgressMetrics() {
return ( return (
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6"> <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
<div className="flex items-center justify-between pb-3 px-2"> <div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
<h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3> <h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
{/* Example 2: With Completed Status */} {/* Example 2: With Completed Status */}
<div> <div>
@@ -31,9 +31,9 @@ function ProgressMetrics() {
</div> </div>
<div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8"> <div className="flex flex-col md:flex-row items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8">
{/* Left section with progress indicators */} {/* Left section with progress indicators */}
<div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 pr-10"> <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 md:pr-10 pr-0">
{/* 60% Progress */} {/* 60% Progress */}
<div className="w-[100%]"> <div className="w-[100%]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -52,7 +52,7 @@ function ProgressMetrics() {
</div> </div>
<div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 2xl:gap-32 gap-3"> <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-32 gap-3">
{/* 75% Keyword Visibility */} {/* 75% Keyword Visibility */}
<div className="w-[30%]"> <div className="w-[30%]">
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div> <div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
@@ -80,7 +80,7 @@ function ProgressMetrics() {
</div> </div>
{/* Right section with Chat GPT and metrics */} {/* Right section with Chat GPT and metrics */}
<div className="flex items-center w-1/3"> <div className="flex items-center md:w-1/3 w-full">
{/* Performance metrics with chart */} {/* Performance metrics with chart */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">

2
src/components/shared/ContainerPage.tsx
عرض الملف

@@ -2,7 +2,7 @@ import React from 'react'
const ContainerPage = ({ children }: { children: React.ReactNode }) => { const ContainerPage = ({ children }: { children: React.ReactNode }) => {
return ( return (
<div className='min-h-screen container pt-6 pb-20'> <div className='min-h-screen container pt-0 pb-20 md:pt-6 md:px-0 px-2'>
{children} {children}
</div> </div>
) )

4
src/components/shared/HeaderPage.tsx
عرض الملف

@@ -3,8 +3,8 @@ import UrlDropdown from "./UrlDropdown"
const HeaderPage = ({ title }: { title: string }) => { const HeaderPage = ({ title }: { title: string }) => {
return ( return (
<div className="flex space-x-4 my-4 lg:flex-row flex-col items-baseline"> <div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
<h1 className="text-3xl font-bold text-gray-800">{title}</h1> <h1 className="text-3xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
<UrlDropdown /> <UrlDropdown />

2
src/components/shared/Stepper.tsx
عرض الملف

@@ -13,7 +13,7 @@ interface StepperProps {
export function Stepper({ steps }: StepperProps) { export function Stepper({ steps }: StepperProps) {
return ( return (
<div className="inline-flex items-center gap-3 rounded-full px-4 py-2"> <div className="flex md:flex-row flex-col items-center gap-3 rounded-full px-4 py-2">
{steps.map((step, index) => ( {steps.map((step, index) => (
<div key={step.number} className="flex items-center gap-3 "> <div key={step.number} className="flex items-center gap-3 ">
{/* Step Badge and Label */} {/* Step Badge and Label */}

2
src/components/shared/UrlDropdown.tsx
عرض الملف

@@ -21,7 +21,7 @@ export default function UrlDropdown() {
}; };
return ( return (
<div className="relative text-sm max-w-[400px] min-w-[220px]"> <div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
{/* Input box */} {/* Input box */}
<div <div
className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer focus:border-2 focus:border-blue-500" className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer focus:border-2 focus:border-blue-500"

57
src/pages/Portfolio.tsx
عرض الملف

@@ -78,27 +78,26 @@ function Portfolio() {
return ( return (
<ContainerPage> <ContainerPage>
<HeaderPage title="Live Library" /> <HeaderPage title="Live Library" />
<div className='flex gap-8 mx-auto'> <div className='flex flex-col lg:flex-row gap-6 lg:gap-8 mx-auto'>
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> <RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
{/* Table Section */} {/* Table Section */}
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'> <section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
{/* Title Bar */} {/* Title Bar */}
<div className='flex items-center justify-between mb-2'> <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
<div className='flex flex-col items-start gap-2'> <div className='flex flex-col items-start gap-2'>
<span className='text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span> <span className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
<span className='text-gray-500 rounded-md text-md font-medium'><span className='font-bold pr-3 text-black'>Links:</span> <span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
<span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-5'>32%</b> Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1'>4%</b></span> </span>
<span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
<span className='flex items-center gap-2 text-gray-800 text-md'>Content Publishing: <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
<span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border'>Locked</span>
</span> </span>
</div> </div>
<div className='flex items-center gap-3'> <div className='flex flex-wrap items-center gap-2 sm:gap-3'>
<BacklinkTypeDropdown options={ <BacklinkTypeDropdown options={
{ {
Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
@@ -110,17 +109,16 @@ function Portfolio() {
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" /> <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" />
<button className='bg-[#fff] text-gray-500 border px-4 py-1 rounded-lg text-md font-bold transition-colors flex items-center gap-2'> <button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-1 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<img src={Share2} alt="" /> <img src={Share2} alt="" className='w-4 h-4' />
<span>Export</span> <span>Export</span>
{/* <MetricCard label="Export" tooltipText="tooltipText" /> */}
</button> </button>
</div> </div>
</div> </div>
{/* Global Filter/Sort Header Row */} {/* Global Filter/Sort Header Row */}
<div className='flex items-center justify-end gap-4 mb-2 px-4 py-3 '> <div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
<div className='flex items-center gap-8 text-sm font-medium text-gray-600'> <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '> <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
DR <SortIcon /> DR <SortIcon />
</span> </span>
@@ -154,32 +152,31 @@ function Portfolio() {
<span className='text-md font-bold bg-white p-1 px-2 rounded-full'>{cat.rows.length}</span> <span className='text-md font-bold bg-white p-1 px-2 rounded-full'>{cat.rows.length}</span>
</div> </div>
</div> </div>
<div className='bg-white rounded-xl border overflow-hidden shadow-sm'> <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
<table className='w-full'> <table className='w-full min-w-[800px]'>
<tbody> <tbody>
{cat.rows.map((row, rIdx) => ( {cat.rows.map((row, rIdx) => (
<tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'> <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
<td className='w-12 px-4 py-3'> <td className='w-12 px-2 sm:px-4 py-3'>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<img src={row.icon} alt="" className='w-10 h-10 rounded-full' /> <img src={row.icon} alt="" className='w-8 h-8 sm:w-10 sm:h-10 rounded-full' />
<span className='text-xs font-bold w-[40px]'> </span> <span className='text-xs font-bold w-[40px]'> </span>
</div> </div>
</td> </td>
<td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}> <td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}>
<div className='truncate max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer'>{row.title}</div> <div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{row.title}</div>
</td> </td>
<td className='py-3 px-4 text-center w-20 font-semibold text-gray-700'>{row.DR}</td> <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>
<td className='py-3 px-4 text-center w-20 font-semibold text-gray-700'>{row.DA}</td> <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DA}</td>
<td className='py-3 px-4 text-center w-24 font-semibold text-gray-700'>{row.traffic}</td> <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-semibold text-gray-700 text-sm'>{row.traffic}</td>
<td className='py-3 px-4 text-center '> <td className='py-3 px-2 sm:px-4 text-center'>
<div className={`rounded-full text-xs ${pillClass(row.indexed.toString())}`}>{row.indexed}</div> <div className={`rounded-full text-xs ${pillClass(row.indexed.toString())}`}>{row.indexed}</div>
{/* whitespace-nowrap */}
</td> </td>
<td className='py-3 px-2 text-center w-28'> <td className='py-3 px-2 text-center w-24 sm:w-28'>
<span className={`rounded-full text-xs ${pillClass(row.interlinked.toString())}`}>{row.interlinked}</span> <span className={`rounded-full text-xs ${pillClass(row.interlinked.toString())}`}>{row.interlinked}</span>
</td> </td>
<td className='py-3 px-4 text-center w-24 font-medium text-gray-700'>{row.date}</td> <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-medium text-gray-700 text-sm'>{row.date}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

211
src/pages/Settings.tsx
عرض الملف

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import { useState } from 'react';
const Settings = () => { const Settings = () => {
const [activeSection, setActiveSection] = useState("profile"); const [activeSection, setActiveSection] = useState("profile");
@@ -78,11 +78,11 @@ const Settings = () => {
}; };
return ( return (
<div className="max-w-7xl mx-auto px-6 py-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
<div className="flex gap-8"> <div className="flex flex-col lg:flex-row gap-8">
{/* Sidebar */} {/* Sidebar */}
<div className="w-64 flex-shrink-0"> <div className="w-full lg:w-64 flex-shrink-0">
<h1 className="text-3xl font-bold text-gray-900 mb-8">Settings</h1> <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 lg:mb-8">Settings</h1>
<nav className="space-y-2"> <nav className="space-y-2">
{sidebarItems.map((item) => ( {sidebarItems.map((item) => (
@@ -131,83 +131,146 @@ const Settings = () => {
{/* Main Content */} {/* Main Content */}
<div className="flex-1"> <div className="flex-1">
<div className="bg-white"> {activeSection === "profile" && (
<h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2> <div className="bg-white">
<p className="text-gray-600 mb-8"> <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
View and update your personal details and account information. <p className="text-gray-600 mb-8">
</p> View and update your personal details and account information.
</p>
<form className="space-y-6"> <form className="space-y-6">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Name Name
</label> </label>
<input <input
type="text" type="text"
defaultValue="Eugiene Jonathan" defaultValue="Eugiene Jonathan"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Email Email
</label> </label>
<input <input
type="email" type="email"
defaultValue="Eugiene Jonathan" defaultValue="Eugiene Jonathan"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Password Password
</label> </label>
<input <input
type="password" type="password"
defaultValue="Eugiene Jonathan" defaultValue="Eugiene Jonathan"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Member Since Member Since
</label> </label>
<input <input
type="text" type="text"
defaultValue="12 Aug 2025" defaultValue="12 Aug 2025"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<span>Total Keywords Campaigns</span> <span>Total Keywords Campaigns</span>
<svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" /> <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
</svg> </svg>
</div> </div>
</label> </label>
<input <input
type="text" type="text"
defaultValue="234,029" defaultValue="234,029"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/> />
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
type="submit" type="submit"
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
> >
Save Save
</button>
</div>
</form>
</div>
)}
{activeSection === "campaigns" && (
<div className="bg-white">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
<div>
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Campaigns</h2>
<p className="text-sm sm:text-base text-gray-600">
Manage your keyword campaigns and track performance.
</p>
</div>
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap self-start sm:self-auto">
Create Campaign
</button> </button>
</div> </div>
</form>
</div> <div className="space-y-4">
{[
{ name: "Summer Sale 2025", keywords: 127, status: "Active", performance: "+12.5%" },
{ name: "Product Launch Q3", keywords: 89, status: "Active", performance: "+8.3%" },
{ name: "Brand Awareness", keywords: 234, status: "Paused", performance: "+5.2%" },
{ name: "Holiday Campaign", keywords: 156, status: "Active", performance: "+15.7%" },
].map((campaign, index) => (
<div key={index} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition-colors">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
<h3 className="text-base sm:text-lg font-semibold text-gray-900">{campaign.name}</h3>
<span className={`px-3 py-1 rounded-full text-xs font-medium self-start ${
campaign.status === "Active"
? "bg-green-100 text-green-700"
: "bg-yellow-100 text-yellow-700"
}`}>
{campaign.status}
</span>
</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600">
<span>{campaign.keywords} keywords</span>
<span className="flex items-center space-x-1">
<span>Performance:</span>
<span className="text-green-600 font-medium">{campaign.performance}</span>
</span>
</div>
</div>
<div className="flex items-center space-x-2">
<button className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
</button>
<button className="p-2 text-gray-400 hover:text-red-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
))}
</div>
</div>
)}
</div> </div>
</div> </div>
</div> </div>

8
src/pages/Strategy.tsx
عرض الملف

@@ -20,16 +20,14 @@ function Strategy() {
return ( return (
<ContainerPage> <ContainerPage>
<HeaderPage title="Strategy" /> <HeaderPage title="Strategy" />
<div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%]"> <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%] gap-6 lg:gap-8">
{/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
<RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
<div className="flex-1 px-4"> <div className="flex-1 px-2 sm:px-4 w-full lg:w-auto">
<ProgressMetrics /> <ProgressMetrics />
<div className="bg-white rounded-lg border border-gray-200 p-3 pb-10"> <div className="bg-white rounded-lg border border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
{selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails /> {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
} }

8
src/pages/login.tsx
عرض الملف

@@ -285,7 +285,7 @@ export default function Login() {
)} )}
<form onSubmit={handleSubmitForgotPassword} className="space-y-4 mt-4"> <form onSubmit={handleSubmitForgotPassword} className="space-y-4 mt-4">
{/* <form onSubmit={swapAuth ? handleSubmitSignUp : forgotPassword ? handleSubmitForgotPassword : handleSubmit} className="space-y-4 mt-4"> */} {/* <form onSubmit={swapAuth ? handleSubmitSignUp : forgotPassword ? handleSubmitForgotPassword : handleSubmit} className="space-y-4 mt-4"> */}
<div className="relative"> <div className="relative">
<label htmlFor="email" className="block text-sm font-medium mb-1">Email Address</label> <label htmlFor="email" className="block text-sm font-medium mb-1">Email Address</label>
<div className="relative"> <div className="relative">
@@ -299,7 +299,7 @@ export default function Login() {
name="email" name="email"
type="email" type="email"
required required
className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 "
placeholder="your.email@example.com" placeholder="your.email@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
@@ -429,7 +429,7 @@ export default function Login() {
name="email" name="email"
type="email" type="email"
required required
className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white"
placeholder="your.email@example.com" placeholder="your.email@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
@@ -450,7 +450,7 @@ export default function Login() {
name="password" name="password"
type="password" type="password"
required required
className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white"
placeholder="••••••••" placeholder="••••••••"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}