Table fixes
هذا الالتزام موجود في:
Your Name
@@ -3,25 +3,43 @@ 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-xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
|
||||
<div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
|
||||
<div className="flex items-baseline gap-4 flex-wrap">
|
||||
<h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
|
||||
{/* First SVG dot */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="4"
|
||||
height="4"
|
||||
viewBox="0 0 4 4"
|
||||
fill="none"
|
||||
className="flex-shrink-0 -translate-y-1"
|
||||
>
|
||||
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
|
||||
</svg>
|
||||
|
||||
<UrlDropdown />
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
|
||||
{/* Second SVG dot */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="4"
|
||||
height="4"
|
||||
viewBox="0 0 4 4"
|
||||
fill="none"
|
||||
className="flex-shrink-0 -translate-y-1"
|
||||
>
|
||||
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
|
||||
</svg>
|
||||
|
||||
<div className="flex gap-1">
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
<MetricCard value="12" label="DR" valueChange="+1" size="sm" />
|
||||
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
|
||||
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -46,11 +46,11 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
|
||||
|
||||
<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 p-[3px] justify-between `}>
|
||||
<span className="text-sm text-gray-400">{!tooltipText && label}</span>
|
||||
<span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>
|
||||
|
||||
<span className="text-[#787B91] bg-gray-200 px-1 py-0 rounded-md">{value}</span>
|
||||
<span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
|
||||
{valueChange && (
|
||||
<div className="flex items-center text-md font-semibold text-green-500">
|
||||
<div className="flex items-center text-md font-medium text-[#029056]">
|
||||
{Icon && (
|
||||
<ArrowUp size={14} className="inline-block mr-1" />
|
||||
)}
|
||||
|
||||
@@ -144,7 +144,7 @@ function Portfolio() {
|
||||
{/* 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={`px-4 py-1 rounded-lg font-bold text-sm m-2 ${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> */}
|
||||
@@ -154,7 +154,7 @@ 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-x-auto shadow-sm'>
|
||||
<div className='bg-white border-l-0 border-r-0 border last:border-b-0 overflow-x-auto shadow-sm'>
|
||||
<table className='w-full min-w-[800px]'>
|
||||
<tbody>
|
||||
{cat.rows.map((row, rIdx) => (
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم