Design Finish Stage 1
1. Finish 3 pages design
هذا الالتزام موجود في:
204
src/pages/Portfolio.tsx
Normal file
204
src/pages/Portfolio.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
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;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم