Design Finish Stage 1
1. Finish 3 pages design
هذا الالتزام موجود في:
262
src/components/Strategy/ShowDetails.tsx
Normal file
262
src/components/Strategy/ShowDetails.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
|
||||
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="font-semibold text-gray-900 text-lg">{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
|
||||
المرجع في مشكلة جديدة
حظر مستخدم