Updated the design step 1 is finsih now I'll check it with mohammed
هذا الالتزام موجود في:
@@ -1,204 +1,205 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Vector from "../assets/icons/Vector.png"
|
||||
import Vector2 from "../assets/icons/Vector2.png"
|
||||
import BacklinkTypeDropdown from '../components/Portfolio/BacklinkTypeDropdown';
|
||||
import RoadmapSidebar from '../components/Strategy/RoadmapSidebar';
|
||||
import HeaderPage from '../components/shared/HeaderPage';
|
||||
import ContainerPage from '../components/shared/ContainerPage';
|
||||
|
||||
|
||||
// Sidebar data
|
||||
const sidebarLinks = [
|
||||
'CPA Los Angeles',
|
||||
'Richard Bower CPA',
|
||||
'CPA Los Angeles',
|
||||
'CPA Hollywood',
|
||||
'Best CPA Los Angeles',
|
||||
'CPA Los Angeles',
|
||||
];
|
||||
|
||||
// Category table data
|
||||
const categories = [
|
||||
{
|
||||
name: 'Social',
|
||||
color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
|
||||
rows: [
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'N/A', date: '9/16/25' },
|
||||
{ icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'In Progress', date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Citation',
|
||||
color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
|
||||
rows: [
|
||||
{ icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'N/A', date: '9/16/25' },
|
||||
{ icon: '🅰️', 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' },
|
||||
{ icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Web 2.0',
|
||||
color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
|
||||
rows: [
|
||||
{ icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🎵', title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅰️', 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' },
|
||||
{ icon: '🅿️', title: 'Pin DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const pillClass = (val: string) =>
|
||||
val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
|
||||
: val === 'In Progress' ? 'bg-blue-100 text-blue-700 whitespace-nowrap font-bold'
|
||||
: 'bg-gray-100 text-gray-700 font-bold';
|
||||
|
||||
function Portfolio() {
|
||||
const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
|
||||
|
||||
|
||||
return (
|
||||
<ContainerPage>
|
||||
<HeaderPage title="Live Library" />
|
||||
<div className='flex gap-8 mx-auto'>
|
||||
{/* Sidebar */}
|
||||
{/* <aside className='w-72 border rounded-2xl shadow-sm bg-white px-5 py-6 h-fit'>
|
||||
<div className='font-extrabold text-xl mb-5 text-[#4285F4] flex items-center'>
|
||||
<span className='w-3 h-3 rounded-full bg-[#4285F4] mr-2'></span>
|
||||
Live Library
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
{sidebarLinks.map((link, idx) => (
|
||||
<li key={idx} className={`px-3 py-2 text-md flex items-center gap-2 rounded-xl cursor-pointer hover:bg-[#e3edfc] transition-colors ${idx === 0 ? 'bg-[#e3edfc] text-[#4285F4] font-bold' : 'text-gray-700'}`}>
|
||||
|
||||
{
|
||||
idx === 0
|
||||
?
|
||||
<img src={Vector} alt={link} className="w-4 h-4" />
|
||||
:
|
||||
<img src={Vector2} alt={link} className="w-4 h-4" />
|
||||
|
||||
}
|
||||
{link}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside> */}
|
||||
|
||||
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
|
||||
|
||||
|
||||
{/* Table Section */}
|
||||
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'>
|
||||
{/* Title Bar */}
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='flex flex-col items-start gap-3'>
|
||||
<span className='text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
|
||||
<span className='bg-[#f1f5f9] text-gray-700 px-3 py-1 rounded-md text-xs border font-medium'>Links: <b>Indexed 32%</b> • Interlinked <b>4%</b></span>
|
||||
|
||||
<span className='flex items-center gap-2 text-gray-800'>Content Publishing:
|
||||
<span className='bg-[#fee2e2] text-[#dc2626] px-2 py-0 rounded-md text-xs font-bold border'>Locked</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-3'>
|
||||
<BacklinkTypeDropdown />
|
||||
<select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
|
||||
<option>DA</option>
|
||||
<option>DR</option>
|
||||
<option>Traffic</option>
|
||||
</select>
|
||||
<select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
|
||||
<option>Traffic</option>
|
||||
<option>DA</option>
|
||||
<option>DR</option>
|
||||
</select>
|
||||
<button className='bg-[#e3edfc] text-[#4285F4] border px-4 py-1 rounded-lg text-xs font-bold hover:bg-[#4285F4] hover:text-white transition-colors'>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Filter/Sort Header Row */}
|
||||
<div className='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'>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
DR <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
DA <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Traffic <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Indexed <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Interlinked <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Date <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tables */}
|
||||
{categories.map((cat, idx) => (
|
||||
<div key={idx} className='mb-8 last:mb-0'>
|
||||
<div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
|
||||
<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>
|
||||
<span>{cat.name}</span>
|
||||
</div>
|
||||
<span className='text-xs font-semibold text-gray-500 bg-white px-2 py-1 rounded-full'>{cat.rows.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white rounded-xl border overflow-hidden shadow-sm'>
|
||||
<table className='w-full'>
|
||||
<tbody>
|
||||
{cat.rows.map((row, rIdx) => (
|
||||
<tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
|
||||
<td className='py-3 px-4 text-center w-12'>{row.icon}</td>
|
||||
<td className='py-3 px-4 w-full text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
|
||||
<div className='truncate max-w-[350px] whitespace-pre-wrap'>{row.title}</div>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-16 font-semibold'>{row.DR}</td>
|
||||
<td className='py-3 px-4 text-center w-16 font-semibold'>{row.DA}</td>
|
||||
<td className='py-3 px-4 text-center w-24 font-semibold'>{row.traffic}</td>
|
||||
<td className='py-3 px-4 text-center w-20'>
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.indexed)}`}>{row.indexed}</span>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-24'>
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.interlinked)}`}>{row.interlinked}</span>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-20 font-medium text-gray-600'>{row.date}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
</ContainerPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Portfolio;
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Vector from "../assets/icons/Vector.png"
|
||||
import Vector2 from "../assets/icons/Vector2.png"
|
||||
import BacklinkTypeDropdown from '../components/Portfolio/BacklinkTypeDropdown';
|
||||
import RoadmapSidebar from '../components/Strategy/RoadmapSidebar';
|
||||
import HeaderPage from '../components/shared/HeaderPage';
|
||||
import ContainerPage from '../components/shared/ContainerPage';
|
||||
import Amazing from "../assets/icons/amazon.png"
|
||||
import { CircleCheck } from 'lucide-react';
|
||||
// import Pinterest from "../assets/icons/pinterest.png"
|
||||
// import AppleMusic from "../assets/icons/apple-music.png"
|
||||
// import Substack from "../assets/icons/substack.png"
|
||||
// import Pin from "../assets/icons/pin.png"
|
||||
import Progress from "../assets/icons/InProgress.png"
|
||||
import No from "../assets/icons/no.png"
|
||||
import Share2 from "../assets/icons/Share2.png"
|
||||
import MetricCard from '../components/shared/MetricCard';
|
||||
|
||||
const done = <div className='flex items-center gap-2 w-[100px]'> <CircleCheck className='w-6 h-6 text-[#fff] bg-green-500 rounded-full' /> <span className='text-green-500 font-bold text-md'>Done</span></div>
|
||||
|
||||
const progress = <div className='flex items-center gap-2 w-[100px]'>
|
||||
<img src={Progress} alt="" className='w-6 h-6' />
|
||||
<span className='text-blue-500 font-bold text-md'>In Progress</span></div>
|
||||
// Category table data
|
||||
|
||||
const nA = <div className='flex items-center gap-2'>
|
||||
<img src={No} alt="" className='w-6 h-6' />
|
||||
<span className='text-gray-500 font-bold text-md'>N/A</span></div>
|
||||
|
||||
const categories = [
|
||||
{
|
||||
name: 'Social',
|
||||
color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
|
||||
rows: [
|
||||
{
|
||||
icon: Amazing, title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293',
|
||||
indexed: done,
|
||||
interlinked: done, date: '9/16/25'
|
||||
},
|
||||
{ icon: Amazing, title: 'Questions to ask your CPA Published on Amazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, 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: progress, interlinked: nA, date: '9/16/25' },
|
||||
{ icon: Amazing, title: 'Pinterest DR 97 DA 95 Traffic 3,989,220', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' },
|
||||
{ icon: Amazing, title: 'Questions to ask your CPA Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: progress, date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Citation',
|
||||
color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
|
||||
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' },
|
||||
{ icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Web 2.0',
|
||||
color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
|
||||
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' },
|
||||
{ icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, 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: progress, interlinked: done, date: '9/16/25' },
|
||||
{ icon: Amazing, title: 'Pin DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: progress, date: '9/16/25' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const pillClass = (val: string) =>
|
||||
val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
|
||||
: val === 'In Progress' ? 'bg-blue-100 text-blue-700 whitespace-nowrap font-bold'
|
||||
: 'bg-gray -100 text-gray-700 font-bold';
|
||||
|
||||
function Portfolio() {
|
||||
const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
|
||||
|
||||
|
||||
return (
|
||||
<ContainerPage>
|
||||
<HeaderPage title="Live Library" />
|
||||
<div className='flex gap-8 mx-auto'>
|
||||
|
||||
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
|
||||
|
||||
{/* Table Section */}
|
||||
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'>
|
||||
{/* Title Bar */}
|
||||
<div className='flex items-center justify-between mb-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-gray-500 rounded-md text-md font-medium'><span className='font-bold 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>
|
||||
|
||||
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1'>4%</b></span>
|
||||
|
||||
<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'>Locked</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-3'>
|
||||
<BacklinkTypeDropdown options={
|
||||
{
|
||||
Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
|
||||
}} title="Backlink Type" subTitle="Show rings:" />
|
||||
|
||||
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />
|
||||
|
||||
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" 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'>
|
||||
<img src={Share2} alt="" />
|
||||
<span>Export</span>
|
||||
{/* <MetricCard label="Export" tooltipText="tooltipText" /> */}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Filter/Sort Header Row */}
|
||||
<div className='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'>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
|
||||
DR <SortIcon />
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
DA <SortIcon />
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Traffic <SortIcon />
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Indexed <SortIcon />
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Interlinked <SortIcon />
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Date <SortIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tables */}
|
||||
{categories.map((cat, idx) => (
|
||||
<div key={idx} className='mb-8 last:mb-0'>
|
||||
<div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
|
||||
<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> */}
|
||||
<span>{cat.name}</span>
|
||||
</div>
|
||||
<span className='text-md font-bold bg-white p-1 px-2 rounded-full'>{cat.rows.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white rounded-xl border overflow-hidden shadow-sm'>
|
||||
<table className='w-full'>
|
||||
<tbody>
|
||||
{cat.rows.map((row, rIdx) => (
|
||||
<tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
|
||||
<td className='w-12 px-4 py-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<img src={row.icon} alt="" className='w-10 h-10 rounded-full' />
|
||||
<span className='text-xs font-bold w-[40px]'> </span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<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>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-20 font-semibold text-gray-700'>{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-4 text-center w-24 font-semibold text-gray-700'>{row.traffic}</td>
|
||||
<td className='py-3 px-4 text-center '>
|
||||
<div className={`rounded-full text-xs ${pillClass(row.indexed.toString())}`}>{row.indexed}</div>
|
||||
{/* whitespace-nowrap */}
|
||||
</td>
|
||||
<td className='py-3 px-2 text-center w-28'>
|
||||
<span className={`rounded-full text-xs ${pillClass(row.interlinked.toString())}`}>{row.interlinked}</span>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-24 font-medium text-gray-700'>{row.date}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
</ContainerPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Portfolio;
|
||||
|
||||
const SortIcon = () => {
|
||||
return (
|
||||
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" className='ml-2'>
|
||||
<path d="M10.6944 9.46965C10.6944 9.58746 10.6464 9.70528 10.5744 9.79953L7.52593 13.004C7.38191 13.1689 7.11788 13.1925 6.94985 13.0511C6.92585 13.0276 6.92585 13.0276 6.90184 13.004L3.85342 9.77596C3.78141 9.70528 3.7334 9.58746 3.7334 9.46965C3.7334 9.23403 3.92543 9.02197 4.16546 8.99841H10.2623C10.5024 8.99841 10.6944 9.21047 10.6944 9.46965ZM10.6944 5.89049C10.6944 6.12611 10.5024 6.33817 10.2623 6.36173H4.16546C3.92543 6.36173 3.7334 6.14967 3.7334 5.89049C3.7334 5.77268 3.78141 5.65486 3.85342 5.56062L6.90184 2.35614C7.04587 2.1912 7.3099 2.16764 7.47793 2.30902C7.50193 2.33258 7.50193 2.33258 7.52593 2.35614L10.5744 5.58418C10.6464 5.65486 10.6944 5.77268 10.6944 5.89049Z" fill="#999BAD" />
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم