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

Merge branch 'main' of https://app.gitpasha.com/mohammedsaid18/dashboard

تصفح المصدر
هذا الالتزام موجود في:
Your Name
2025-10-13 04:38:26 -04:00
الأصل bc33f20959 69c1d73e3b
التزام bb807d16fa
8 ملفات معدلة مع 89 إضافات و81 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

6
src/components/CampaignTracker.tsx
عرض الملف

@@ -79,7 +79,7 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
{/* Status Cards */}
<div className="grid grid-cols-3 gap-4 mb-8">
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="px-2 rounded-lg p-1 border">
<div className=" text-gray-700 mb-1 ">Indexed:</div>
<div className="text-sm font-bold text-gray-900">77%</div>
@@ -95,14 +95,14 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
</div>
{/* Progress Sections */}
<div className="space-y-8">
<div className="space-y-7">
{progressSections.map((section, index) => {
const progressPercentage = (section.current / section.total) * 100
return (
<div key={index} className="space-y-1">
{/* Section Title and Progress */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center justify-between mb-1">
<h3 className="text-sm font-semibold text-gray-900">
{section.title}: {section.current}/{section.total}
</h3>

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

@@ -4,24 +4,13 @@ import React, { useState } from "react";
import MultiRingCircularProgress from "./MultiRingCircularProgress";
import CampaignTracker from "./CampaignTracker";
import {
ArrowLeft, Menu, FileText,
TrendingUp,
Info,
ArrowUp,
Link,
ChevronDown,
MapPin,
ArrowLeft,
Sparkles
} from "lucide-react";
import MetricCard from "./shared/MetricCard";
import UrlDropdown from "./shared/UrlDropdown";
import HeaderPage from "./shared/HeaderPage";
import Google from "../assets/icons/google-original-logo.svg";
import Gemini from "../assets/icons/gemini.svg";
import Gemini2 from "../assets/icons/gemini2.svg";
import Perplexity from "../assets/icons/perplexity-dark-logo.svg";
import Vector from "../assets/icons/Vector.png";
import Vector2 from "../assets/icons/Vector2.png";
import GPT from "../assets/icons/gpt.svg";
import Map from "../assets/icons/maps.svg";
@@ -336,10 +325,6 @@ const competitors = [
]
const pillClass = (val: string) =>
val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
: val === 'In Progress' ? 'bg-blue-100 text-blue-700 font-bold'
: 'bg-gray-100 text-gray-700 font-bold';
export default function DashboardGrid() {
const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([]);
@@ -380,9 +365,6 @@ export default function DashboardGrid() {
setShowKeywordAnalysis(campaignName);
};
const handleCloseKeywordAnalysis = () => {
setShowKeywordAnalysis(null);
};
const TagComponent = ({ content, color = "#4285F4", faded = false }: Tag & { faded?: boolean }) => {
const getIconContent = (item: TagContent) => {
@@ -473,6 +455,16 @@ export default function DashboardGrid() {
return (
<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"
>
<img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />
<div className="flex flex-col px-2 sm:px-4">
<div className="flex items-center gap-2">
<span className="text-xl sm:text-2xl font-bold">{value}</span>
{tooltipText && <div className="relative w-[10%]"
onMouseEnter={() => {
if (tooltipText) {
setIsHovered(true)
@@ -482,15 +474,8 @@ export default function DashboardGrid() {
if (tooltipText) {
setIsHovered(false)
}
}}>
<img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />
<div className="flex flex-col px-2 sm:px-4">
<div className="flex items-center gap-2">
<span className="text-xl sm:text-2xl font-bold">{value}</span>
{tooltipText && <div className="relative">
}}
>
{/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
<img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
@@ -534,13 +519,13 @@ export default function DashboardGrid() {
{CARDS.map((card, idx) => (
<div
key={idx}
className="[perspective:1000px] h-[560px]"
className="[perspective:1000px] h-[480px]"
onClick={() => handleCardClick(card.title, card.paused || false)}
>
<div className={`relative w-full h-full transition-transform duration-700 ease-in-out [transform-style:preserve-3d] ${selectedCampaigns.includes(card.title) ? '[transform:rotateY(180deg)]' : ''
}`}>
{/* Front of card */}
<div className={`absolute w-full h-full [backface-visibility:hidden] bg-white rounded-2xl border transition-all duration-300 ease-in-out cursor-pointer ${card.faded ? "opacity- 60" : ""}
<div className={`absolute w-full h-full [backface-visibility:hidden] bg-white rounded-xl border transition-all duration-300 ease-in-out cursor-pointer ${card.faded ? "opacity- 60" : ""}
${selectedCampaigns.includes(card.title) ? 'shadow-md scale-[1.02]' : 'hover:scale-135 hover:shadow-md'
}`}
style={{
@@ -554,7 +539,7 @@ export default function DashboardGrid() {
<div className="bg-[#f6f8fe] rounded-xl shadow-sm border border-gray-200 p-6 px-20 h-full">
{/* New Keyword Badge */}
<div className="flex justify-center mb-4">
<div className="flex justify-center mb-2">
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-[#197232]" style={{ background: "linear-gradient(90deg, #d6fbe2 30%, #edf9d5 100%)" }}>
<Sparkles className="w-4 h-4" />
NEW High-Value Keyword Found
@@ -562,12 +547,12 @@ export default function DashboardGrid() {
</div>
{/* Keyword Title */}
<h2 className="text-2xl font-bold text-gray-900 text-center mb-6">Tax Prep Attorney Los Angeles</h2>
<h2 className="text-2xl font-bold text-gray-900 text-center mb-4">Tax Prep Attorney Los Angeles</h2>
{/* Competitors List */}
<div className="space-y-4 mb-6">
<div className="space-y-3 mb-4">
{competitors.map((competitor, index) => (
<div key={index} className="space-y-2">
<div key={index} className="space-y-0">
<div className="text-md text-gray-600 font-bold">{competitor.domain}</div>
<div className="flex items-center gap-3 flex-wrap">
{competitor.tags.map((tag, i) => (
@@ -594,25 +579,45 @@ export default function DashboardGrid() {
</div>
</div>
:
<div className="p-5 flex flex-col items-center h-full">
<div className={`p-5 pt-8 flex flex-col items-center h-full `}>
{card.badge && (
<div className="absolute top-0 right-0 overflow-hidden w-32 h-32 pointer-events-none">
<div className="absolute top-6 right-[-100px] w-[320px] bg-[#0CAA75] text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
<div className="flex items-center justify-center gap-1 text-xs font-bold whitespace-nowrap">
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.20122 0.94856L9.60703 1.3343C11.8086 1.58456 12.9094 1.70875 13.0543 2.33535C13.1991 2.96195 12.2508 3.50763 10.3588 4.59994L10.18 4.70343C9.4979 5.09764 9.15638 5.29427 9.06888 5.6358L9.06417 5.65367C8.98326 5.99802 9.18836 6.35365 9.59857 7.06304C10.3371 8.34164 10.7069 8.98046 10.4434 9.42077L10.4293 9.44241C10.1527 9.87331 9.43957 9.7924 8.0095 9.63058L4.60462 9.2439C2.40307 8.99552 1.30323 8.87039 1.15834 8.24379C1.01345 7.61719 1.96088 7.07057 3.85289 5.97826L4.03165 5.87477C4.71376 5.48244 5.05434 5.28486 5.14372 4.94334L5.14842 4.92547C5.22839 4.58206 5.02329 4.22643 4.61403 3.5161C3.87547 2.2375 3.50573 1.59868 3.76916 1.15837L3.78327 1.13673C4.058 0.705826 4.77303 0.786737 6.20122 0.94856Z" stroke="white" strokeWidth="1.625" />
<div className="absolute top-0 right-0 overflow-hidden w-40 h-40 pointer-events-none">
<div className="absolute top-8 -right-10 w-48 bg-[#0CAA75] text-white font-bold py-2 text-center shadow-lg transform rotate-45">
<div className="flex items-center justify-center gap-2 text-xs whitespace-nowrap px-8">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none">
<path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" stroke-width="1.625" />
</svg>
<span>{card.badge}</span>
</div>
</div>
</div>
)}
{idx === 3 && (
<div className="absolute top-4 left-4">
<div className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold bg-[#ffebef] border-[#f8d0de] border-2 border-solid mr-2 h-[30px]" style={{ color: "#FFFFFF" }}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
<path d="M5.83716 4.23774C7.31896 4.23774 8.74008 4.81435 9.78788 5.84071C10.8357 6.86707 11.4243 8.25912 11.4243 9.71062C11.4243 11.1621 10.8357 12.5542 9.78788 13.5805C8.74008 14.6069 7.31896 15.1835 5.83716 15.1835C4.35535 15.1835 2.93424 14.6069 1.88644 13.5805C0.838645 12.5542 0.25 11.1621 0.25 9.71062C0.25 8.25912 0.838645 6.86707 1.88644 5.84071C2.93424 4.81435 4.35535 4.23774 5.83716 4.23774ZM5.83716 5.60596C4.7258 5.60596 3.65997 6.03841 2.87412 6.80819C2.08827 7.57796 1.64679 8.62199 1.64679 9.71062C1.64679 10.7992 2.08827 11.8433 2.87412 12.613C3.65997 13.3828 4.7258 13.8153 5.83716 13.8153C6.94851 13.8153 8.01435 13.3828 8.8002 12.613C9.58604 11.8433 10.0275 10.7992 10.0275 9.71062C10.0275 8.62199 9.58604 7.57796 8.8002 6.80819C8.01435 6.03841 6.94851 5.60596 5.83716 5.60596ZM5.83716 6.63212L6.76044 8.46554L8.82629 8.7597L7.33172 10.1861L7.68441 12.2015L5.83716 11.2499L3.9899 12.2008L4.34259 10.1861L2.84803 8.75902L4.91388 8.46485L5.83716 6.63212ZM10.0275 0.817195V2.86952L9.07561 3.64804C8.28592 3.24152 7.42338 2.98853 6.53555 2.90304V0.817195H10.0275ZM5.13876 0.816511V2.90304C4.25123 2.98841 3.38893 3.24116 2.5994 3.64736L1.64679 2.86952V0.817195L5.13876 0.816511Z" fill="#D55169" />
</svg>
<span className="text-[#D55169]">Top rankings</span>
</div>
<div
className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold border-[#9af2b3] border-2 border-solid h-[30px]"
style={{
color: "#FFFFFF",
background: "linear-gradient(278deg, rgba(240, 250, 181, 0.60) 0.47%, rgba(193, 254, 207, 0.60) 46.54%)"
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
<path d="M5.95435 4.23774C7.43615 4.23774 8.85727 4.81435 9.90506 5.84071C10.9529 6.86707 11.5415 8.25912 11.5415 9.71062C11.5415 11.1621 10.9529 12.5542 9.90506 13.5805C8.85727 14.6069 7.43615 15.1835 5.95435 15.1835C4.47254 15.1835 3.05142 14.6069 2.00363 13.5805C0.955833 12.5542 0.367188 11.1621 0.367188 9.71062C0.367188 8.25912 0.955833 6.86707 2.00363 5.84071C3.05142 4.81435 4.47254 4.23774 5.95435 4.23774ZM5.95435 5.60596C4.84299 5.60596 3.77715 6.03841 2.99131 6.80819C2.20546 7.57796 1.76398 8.62199 1.76398 9.71062C1.76398 10.7992 2.20546 11.8433 2.99131 12.613C3.77715 13.3828 4.84299 13.8153 5.95435 13.8153C7.0657 13.8153 8.13154 13.3828 8.91738 12.613C9.70323 11.8433 10.1447 10.7992 10.1447 9.71062C10.1447 8.62199 9.70323 7.57796 8.91738 6.80819C8.13154 6.03841 7.0657 5.60596 5.95435 5.60596ZM5.95435 6.63212L6.87762 8.46554L8.94348 8.7597L7.44891 10.1861L7.8016 12.2015L5.95435 11.2499L4.10709 12.2008L4.45978 10.1861L2.96522 8.75902L5.03107 8.46485L5.95435 6.63212ZM10.1447 0.817195V2.86952L9.1928 3.64804C8.40311 3.24152 7.54056 2.98853 6.65274 2.90304V0.817195H10.1447ZM5.25595 0.816511V2.90304C4.36841 2.98841 3.50612 3.24116 2.71659 3.64736L1.76398 2.86952V0.817195L5.25595 0.816511Z" fill="#30A372" /></svg>
<span className="text-[#197232]">Top rankings</span>
</div>
</div>
)}
<MultiRingCircularProgress
card={card}
hoveredIndex={hoverState.cardId === card.title ? hoverState.ringIndex : null}
onHover={(index) => handleRingHover(card.title, index)}
cardId={card.title}
/>
<div className={`mt-1 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
{card.title}

16
src/components/MultiRingCircularProgress.tsx
عرض الملف

@@ -1,5 +1,4 @@
import React from "react";
import { PieChart, Pie, Cell } from "recharts";
import { PieChart, Pie, Cell } from "recharts";
interface Ring {
color: string;
@@ -15,17 +14,16 @@ interface MultiRingCircularProgressProps {
card: Card;
hoveredIndex: number | null;
onHover: (index: number | null) => void;
cardId: string;
}
export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) {
export default function MultiRingCircularProgress({ card, hoveredIndex, onHover }: MultiRingCircularProgressProps) {
const { percent, rings } = card;
// Create ring data with proper outer and inner radius calculations
const ringData = rings.map((ring, index) => ({
...ring,
outerRadius: 125 - (index * 20), // Decrease by 20px for each ring
innerRadius: 110 - (index * 20), // Decrease by 20px for each ring
outerRadius: 110 - (index * 18), // Decrease by 18px for each ring
innerRadius: 95 - (index * 18), // Decrease by 18px for each ring
}));
// When a ring is hovered, other rings become gray
@@ -45,7 +43,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
style={{ outline: "none", border: "none" }}
tabIndex={-1}
>
<PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
<PieChart width={300} height={300} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
{ringData.map((ring, index) => (
<Pie
key={index}
@@ -74,8 +72,8 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
</Pie>
))}
<text
x={200}
y={204}
x={150}
y={154}
textAnchor="middle"
dominantBaseline="middle"
style={{ fontSize: "1.3rem", fontWeight: "bold" }}

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

@@ -4,7 +4,7 @@ import UrlDropdown from "./UrlDropdown"
const HeaderPage = ({ title }: { title: string }) => {
return (
<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 mb:mb-0 mb-4">{title}</h1>
<h1 className="text-xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>

12
src/components/shared/MetricCard.tsx
عرض الملف

@@ -45,12 +45,12 @@ console.log(Img);
)}
<div className="flex-1">
<div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2`}>
<div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2 p-[3px] justify-between `}>
<span className="text-sm text-gray-400">{!tooltipText && label}</span>
<span className="text-[#787B91] bg-gray-200 px-1 py-1 rounded-md">{value}</span>
<span className="text-[#787B91] bg-gray-200 px-1 py-0 rounded-md">{value}</span>
{valueChange && (
<div className="flex items-center text-sm font-semibold text-green-500">
<div className="flex items-center text-md font-semibold text-green-500">
{Icon && (
<ArrowUp size={14} className="inline-block mr-1" />
)}
@@ -58,9 +58,9 @@ console.log(Img);
</div>
)}
<div className="flex items-center space-x-1 mt-1 text-gray-500">
<span className="text-sm">{tooltipText && label}</span>
{tooltipText && (
<div className="flex items-center space-x-1 mt-1 text-gray-500">
<span className="text-sm">{label}</span>
<div className="relative">
<Info size={16} className="text-gray-400 cursor-pointer" />
{isHovered && (
@@ -71,8 +71,8 @@ console.log(Img);
</div>
)}
</div>
)}
</div>
)}
</div>
</div>
</div>

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

@@ -22,7 +22,7 @@ export default function UrlDropdown() {
<div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
{/* Input box */}
<div
className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded cursor-pointer focus:border-2 focus:border-blue-500"
className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
onClick={toggleDropdown}
>
<span className="truncate text-gray-800">{selected}</span>
@@ -41,7 +41,7 @@ export default function UrlDropdown() {
{/* Dropdown list */}
{isOpen && (
<div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10">
<div className="absolute mt-1 bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10 w-[110%]">
{urlOptions.map((url, index) => (
<div
key={index}
@@ -51,9 +51,10 @@ export default function UrlDropdown() {
>
<span className="truncate">{url}</span>
{selected === url && (
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="18" viewBox="0 0 66 18" fill="none">
<path d="M47 7.25L51 11.25L59.5 2.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
<path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)}
</div>
))}

2
src/components/shared/scrollableComponent.css
عرض الملف

@@ -6,7 +6,7 @@
}
.custom-scrollbar-table {
max-height: 460px;
max-height: 380px;
overflow-y: scroll;
border: 1px solid #ccc;
}

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

@@ -25,6 +25,7 @@ const categories = [
{
name: 'Social',
color: ' border-[#4285F4] bg-[#001EE21C]',
after: "bg-[#4C60E5]",
rows: [
{
icon: Amazing, title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293',
@@ -40,6 +41,7 @@ const categories = [
{
name: 'Citation',
color: ' border-[#0ea5e9] bg-[#3C87FF2B]',
after: "bg-[#4285F4]",
rows: [
{ icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
{ icon: Amazing, title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
@@ -49,6 +51,7 @@ const categories = [
{
name: 'Web 2.0',
color: 'border-[#22c55e] bg-[#f0fdf4]',
after: "bg-[#34A853]",
rows: [
{ icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: done, date: '9/16/25' },
{ icon: Amazing, title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
@@ -76,9 +79,9 @@ function Portfolio() {
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
{/* Table Section */}
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
<section className='flex-1 bg-white border rounded-2xl shadow-sm py-4 overflow-x-auto'>
{/* Title Bar */}
<div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
<div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4 px-4'>
<div className='flex flex-col items-start gap-2'>
<span className='text-xl sm:text-2xl font-bold '>CPA Los Angeles</span>
<span className='text-gray-500 rounded-md text-sm sm:text-md font-normal'>
@@ -115,8 +118,8 @@ function Portfolio() {
</div>
{/* Global Filter/Sort Header Row */}
<div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
<div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
<div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 border-b border-gray-100 border-solid'>
<div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600 pr-6'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors '>
DR <SortIcon />
</span>
@@ -145,6 +148,7 @@ function Portfolio() {
<div className='flex items-center gap-3'>
<div className='flex items-center gap-2'>
{/* <span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span> */}
<div className={`w-2 h-5 rounded ${cat.after}`}></div>
<span>{cat.name}</span>
</div>
<span className='text-md font-bold bg-white p-1 px-2 rounded-full'>{cat.rows.length}</span>