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

Responsive app

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-03 14:57:49 +03:00
الأصل 4a9915a6b7
التزام 56eb562193
10 ملفات معدلة مع 190 إضافات و132 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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

@@ -78,27 +78,26 @@ function Portfolio() {
return (
<ContainerPage>
<HeaderPage title="Live Library" />
<div className='flex gap-8 mx-auto'>
<div className='flex flex-col lg:flex-row gap-6 lg: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'>
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
{/* Title Bar */}
<div className='flex items-center justify-between mb-2'>
<div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
<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 className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
<span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
<span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
</span>
<span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
<span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
</span>
</div>
<div className='flex items-center gap-3'>
<div className='flex flex-wrap items-center gap-2 sm:gap-3'>
<BacklinkTypeDropdown options={
{
Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
@@ -110,17 +109,16 @@ function Portfolio() {
<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="" />
<button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-1 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<img src={Share2} alt="" className='w-4 h-4' />
<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'>
<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'>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
DR <SortIcon />
</span>
@@ -154,32 +152,31 @@ function Portfolio() {
<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'>
<div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
<table className='w-full min-w-[800px]'>
<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'>
<td className='w-12 px-2 sm:px-4 py-3'>
<div className='flex items-center gap-2'>
<img src={row.icon} alt="" className='w-10 h-10 rounded-full' />
<img src={row.icon} alt="" className='w-8 h-8 sm:w-10 sm: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>
<div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{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 '>
<td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>
<td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DA}</td>
<td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-semibold text-gray-700 text-sm'>{row.traffic}</td>
<td className='py-3 px-2 sm: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'>
<td className='py-3 px-2 text-center w-24 sm: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>
<td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-medium text-gray-700 text-sm'>{row.date}</td>
</tr>
))}
</tbody>