122 أسطر
6.4 KiB
TypeScript
122 أسطر
6.4 KiB
TypeScript
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/perplexity-dark-logo.svg"
|
|
import ChatGPT from "../../assets/icons/gpt.svg"
|
|
import Gemini from "../../assets/icons/gemini.svg"
|
|
import Gemini1 from "../../assets/icons/gemini1.png"
|
|
import Gemini2 from "../../assets/icons/gemini-border.png"
|
|
import Google from "../../assets/icons/google-original-logo.svg"
|
|
|
|
|
|
function ProgressMetrics() {
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
|
|
|
|
<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>
|
|
{/* 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 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 */}
|
|
<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 */}
|
|
<div className="w-[100%]">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-lg 3xl:text-4xl font-bold text-gray-900 mb-1">60%</div>
|
|
<div className="text-lg 3xl:text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
|
</div>
|
|
<div className="text-xs 2xl: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 md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-12 lg:gap-6 gap-3">
|
|
{/* 75% Keyword Visibility */}
|
|
<div className="w-[30%]">
|
|
<div className="text-xl 2xl:text-3xl 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 flex-wrap">
|
|
<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 md:w-1/3 w-full">
|
|
|
|
{/* 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 |