262 أسطر
6.9 KiB
TypeScript
262 أسطر
6.9 KiB
TypeScript
|
|
import { useState } from "react"
|
|
|
|
interface Task {
|
|
id: string
|
|
title: string
|
|
platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music"
|
|
metrics?: string
|
|
}
|
|
|
|
interface Column {
|
|
id: string
|
|
title: string
|
|
count: number
|
|
date: string
|
|
tasks: Task[]
|
|
}
|
|
|
|
const platformIcons = {
|
|
wordpress: (
|
|
<div className="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold">W</span>
|
|
</div>
|
|
),
|
|
substack: (
|
|
<div className="w-5 h-5 bg-orange-500 rounded-sm flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold">S</span>
|
|
</div>
|
|
),
|
|
paypal: (
|
|
<div className="w-5 h-5 bg-blue-500 rounded-sm flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold">P</span>
|
|
</div>
|
|
),
|
|
pinterest: (
|
|
<div className="w-5 h-5 bg-red-500 rounded-sm flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold">P</span>
|
|
</div>
|
|
),
|
|
"apple-music": (
|
|
<div className="w-5 h-5 bg-black rounded-sm flex items-center justify-center">
|
|
<span className="text-white text-xs font-bold">A</span>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
const initialData: Column[] = [
|
|
{
|
|
id: "published",
|
|
title: "Published",
|
|
count: 10,
|
|
date: "Since 23 Oct 2025",
|
|
tasks: [
|
|
{
|
|
id: "1",
|
|
title: "Questions to ask your CPA Published o...",
|
|
platform: "wordpress",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Substack DR 97 DA 95",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "7",
|
|
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "8",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
platform: "apple-music",
|
|
},
|
|
{
|
|
id: "9",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "10",
|
|
title: "Questions to ask your CPA Published o...",
|
|
platform: "wordpress",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "in-progress",
|
|
title: "In Progress",
|
|
count: 10,
|
|
date: "23 Oct 2025",
|
|
tasks: [
|
|
{
|
|
id: "11",
|
|
title: "Questions to ask your CPA Published o...",
|
|
platform: "wordpress",
|
|
},
|
|
{
|
|
id: "12",
|
|
title: "Substack DR 97 DA 95",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "13",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "14",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "15",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "16",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "17",
|
|
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "18",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
platform: "apple-music",
|
|
},
|
|
{
|
|
id: "19",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "20",
|
|
title: "Questions to ask your CPA Published o...",
|
|
platform: "wordpress",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "next-month",
|
|
title: "Next month",
|
|
count: 10,
|
|
date: "23 Nov 2025",
|
|
tasks: [
|
|
{
|
|
id: "21",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "22",
|
|
title: "Substack DR 97 DA 95",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "23",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "24",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "25",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "26",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
platform: "substack",
|
|
},
|
|
{
|
|
id: "27",
|
|
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "paypal",
|
|
},
|
|
{
|
|
id: "28",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
platform: "apple-music",
|
|
},
|
|
{
|
|
id: "29",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
platform: "pinterest",
|
|
},
|
|
{
|
|
id: "30",
|
|
title: "Questions to ask your CPA Published o...",
|
|
platform: "wordpress",
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
function ShowDetails() {
|
|
const [columns, setColumns] = useState<Column[]>(initialData)
|
|
|
|
return (
|
|
<div className="p-2">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{columns.map((column) => (
|
|
<div key={column.id} className="bg-white rounded-lg shadow-sm border border-gray-200 ">
|
|
{/* Column Header */}
|
|
<div className="p-4 border-b border-gray-200 bg-[#F6F6FA] rounded-lg flex justify-between items-center ">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-bold text-[#2B2D3B]">{column.title}</h3>
|
|
<span className="bg-gray-100 text-gray-600 text-sm px-2 py-1 rounded-full">{column.count}</span>
|
|
</div>
|
|
<p className="text-sm text-gray-500">{column.date}</p>
|
|
</div>
|
|
|
|
{/* Tasks List */}
|
|
<div className="p-3 space-y-3 max-h-96 custom-scrollbar">
|
|
{column.tasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="flex items-start gap-3 p-1 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer border-b-2 border-[#f1eeee]"
|
|
>
|
|
{platformIcons[task.platform]}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm line-clamp-2 leading-relaxed truncate max-w-[350px] whitespace-pre-wrap text-blue-600 hover:text-blue-800 underline">{task.title}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ShowDetails |