Updated the design step 1 is finsih now I'll check it with mohammed
هذا الالتزام موجود في:
@@ -1,93 +1,122 @@
|
||||
import Preplextiy from "../../assets/icons/Preplextiy.png"
|
||||
import ChatGPT from "../../assets/icons/gpt.png"
|
||||
import MetricCard from "../shared/MetricCard"
|
||||
|
||||
|
||||
function ProgressMetrics() {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
|
||||
<h3 className="text-lg font-bold text-gray-600 mb-2">CPA Los Angeles</h3>
|
||||
|
||||
<div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4">
|
||||
{/* Left section with progress indicators */}
|
||||
<div className="flex items-center w-1/4 ">
|
||||
{/* 60% Progress */}
|
||||
<div className="w-[100%]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-md font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-70 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
|
||||
style={{ width: "60%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center w-1/3 2xl:gap-32 gap-3">
|
||||
{/* 75% Keyword Visibility */}
|
||||
<div className="w-[30%]">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-sm text-gray-500">Keyword Visibility</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-[100%]">
|
||||
<div className="flex items-center gap-8">
|
||||
<MetricCard
|
||||
img={ChatGPT}
|
||||
value="10" label="ChatGPT" tooltipText="ChatGPT is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
{/* <img src={ChatGPT} alt="ChatGPT" className="w-8 h-8" /> */}
|
||||
|
||||
<MetricCard
|
||||
img={Preplextiy}
|
||||
value="10" label="Preplextiy" tooltipText="Preplextiy is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right section with Chat GPT and metrics */}
|
||||
<div className="flex items-center w-1/3">
|
||||
|
||||
{/* Performance metrics with chart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-42 h-24 relative">
|
||||
<svg viewBox="0 0 96 48" className="w-full h-full">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
|
||||
<circle cx="96" cy="15" r="2" fill="#10B981" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-gray-400">G</span>
|
||||
<span className="text-lg font-bold text-gray-900">7</span>
|
||||
<span className="text-lg text-green-600 font-medium">+10</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-orange-500">📍</span>
|
||||
<span className="text-lg font-bold text-gray-900">5</span>
|
||||
<span className="text-lg text-green-600 font-medium">+3</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Current Rank</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <ShowDetails /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
import MetricCard from "../shared/MetricCard"
|
||||
import Progress from "../../assets/icons/InProgress.png"
|
||||
import No from "../../assets/icons/no.png"
|
||||
import { CircleCheck } from 'lucide-react'
|
||||
import { Stepper } from "../shared/Stepper"
|
||||
import Preplextiy from "../../assets/icons/preplextiy.png"
|
||||
import ChatGPT from "../../assets/icons/gpt.png"
|
||||
import Gemini from "../../assets/icons/gemini.png"
|
||||
import Gemini1 from "../../assets/icons/gemini1.png"
|
||||
import Gemini2 from "../../assets/icons/gemini-border.png"
|
||||
import Google from "../../assets/icons/Google.png"
|
||||
|
||||
|
||||
function ProgressMetrics() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
|
||||
{/* Example 2: With Completed Status */}
|
||||
<div>
|
||||
<Stepper
|
||||
steps={[
|
||||
{ number: 1, label: "Building Backlinks", status: "completed" },
|
||||
{ number: 2, label: "Indexing", status: "active" },
|
||||
{ number: 3, label: "LLM Seeding", status: "inactive" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8">
|
||||
{/* Left section with progress indicators */}
|
||||
<div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 pr-10">
|
||||
{/* 60% Progress */}
|
||||
<div className="w-[100%]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-70 h-3 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
|
||||
style={{ width: "60%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 2xl:gap-32 gap-3">
|
||||
{/* 75% Keyword Visibility */}
|
||||
<div className="w-[30%]">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-sm text-gray-500">Keyword Visibility</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-[100%]">
|
||||
<div className="flex items-center gap-3">
|
||||
<MetricCard
|
||||
img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
|
||||
|
||||
<MetricCard
|
||||
img={Preplextiy}
|
||||
tooltipText="Preplextiy" valueChange="+1" size="sm" />
|
||||
|
||||
<MetricCard
|
||||
img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
|
||||
|
||||
<MetricCard
|
||||
img={Gemini} tooltipText="Gemini" valueChange="+1" size="sm" extraStyle="border-2 border-solid border-gray-300 rounded-lg " />
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right section with Chat GPT and metrics */}
|
||||
<div className="flex items-center w-1/3">
|
||||
|
||||
{/* Performance metrics with chart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-42 h-24 relative">
|
||||
<svg viewBox="0 0 96 48" className="w-full h-full">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
|
||||
<circle cx="96" cy="15" r="2" fill="#10B981" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center justify-start gap-1 mb-1">
|
||||
<img src={Google} className="w-5 h-5 mr-2" alt="" />
|
||||
<span className="text-lg font-bold text-gray-900">7</span>
|
||||
<span className="text-lg text-green-600 font-medium">+10</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1 mb-1">
|
||||
<img src={Google} className="w-5 h-5 mr-2" alt="" />
|
||||
<span className="text-lg font-bold text-gray-900">5</span>
|
||||
<span className="text-lg text-green-600 font-medium">+3</span>
|
||||
</div>
|
||||
<div className="text-md text-gray-500">Current Rank</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <ShowDetails /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressMetrics
|
||||
المرجع في مشكلة جديدة
حظر مستخدم