391 أسطر
11 KiB
TypeScript
391 أسطر
11 KiB
TypeScript
import './shared/scrollableComponent.css';
|
|
|
|
|
|
interface TaskItem {
|
|
id: string
|
|
platform: string
|
|
icon: string
|
|
title: string
|
|
metrics?: string
|
|
isLink?: boolean
|
|
}
|
|
|
|
interface Category {
|
|
name: string
|
|
count: number
|
|
color: string
|
|
highlight: string
|
|
items: TaskItem[]
|
|
}
|
|
|
|
interface Column {
|
|
title: string
|
|
count: number
|
|
date?: string
|
|
categories: Category[]
|
|
}
|
|
|
|
const IntegratedStrategy = () => {
|
|
const columns: Column[] = [
|
|
{
|
|
title: "Built",
|
|
count: 104,
|
|
categories: [
|
|
{
|
|
name: "Social",
|
|
count: 4,
|
|
color: "bg-[rgba(0,30,226,0.11)]",
|
|
highlight: "bg-[#4C60E5]",
|
|
items: [
|
|
{
|
|
id: "1",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "2",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "3",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "4",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
isLink: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Citation",
|
|
count: 2,
|
|
color: "bg-[rgba(60,135,255,0.17)]",
|
|
highlight: "bg-[#4285F4]",
|
|
items: [
|
|
{
|
|
id: "5",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "6",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
isLink: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Web 2.0",
|
|
count: 3,
|
|
color: "bg-[rgba(31,228,84,0.16)]",
|
|
highlight: "bg-[#34A853]",
|
|
items: [
|
|
{
|
|
id: "7",
|
|
platform: "Apple Music",
|
|
icon: "🎵",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "8",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
isLink: true,
|
|
},
|
|
{
|
|
id: "9",
|
|
platform: "Pinterest",
|
|
icon: "⚫",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
isLink: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Multimedia",
|
|
count: 1,
|
|
color: "bg-[rgba(255,197,30,0.27)]",
|
|
highlight: "bg-[#FBBC05]",
|
|
items: [
|
|
{
|
|
id: "10",
|
|
platform: "Pinterest",
|
|
icon: "⚫",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
isLink: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "In Progress",
|
|
count: 14,
|
|
date: "23 Oct 2025",
|
|
categories: [
|
|
{
|
|
name: "Social",
|
|
count: 3,
|
|
color: "bg-[rgba(0,30,226,0.11)]",
|
|
highlight: "bg-[#4C60E5]",
|
|
items: [
|
|
{
|
|
id: "11",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "12",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95",
|
|
},
|
|
{
|
|
id: "13",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Citation",
|
|
count: 5,
|
|
color: "bg-[rgba(60,135,255,0.17)]",
|
|
highlight: "bg-[#4285F4]",
|
|
items: [
|
|
{
|
|
id: "14",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "15",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "16",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
},
|
|
{
|
|
id: "17",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "18",
|
|
platform: "Apple Music",
|
|
icon: "🎵",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Web 2.0",
|
|
count: 5,
|
|
color: "bg-[rgba(31,228,84,0.16)]",
|
|
highlight: "bg-[#34A853]",
|
|
items: [
|
|
{
|
|
id: "19",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "20",
|
|
platform: "Questions",
|
|
icon: "⚫",
|
|
title: "Questions to ask your CPA Published o...",
|
|
},
|
|
{
|
|
id: "21",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Coming up",
|
|
count: 10,
|
|
date: "23 Nov 2025",
|
|
categories: [
|
|
{
|
|
name: "Social",
|
|
count: 5,
|
|
color: "bg-[rgba(0,30,226,0.11)]",
|
|
highlight: "bg-[#4C60E5]",
|
|
items: [
|
|
{
|
|
id: "22",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "23",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95",
|
|
},
|
|
{
|
|
id: "24",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
},
|
|
{
|
|
id: "25",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "26",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Citation",
|
|
count: 5,
|
|
color: "bg-[rgba(60,135,255,0.17)]",
|
|
highlight: "bg-[#4285F4]",
|
|
items: [
|
|
{
|
|
id: "27",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "28",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
{
|
|
id: "29",
|
|
platform: "Substack",
|
|
icon: "🟠",
|
|
title: "Substack DR 97 DA 95 Traffic",
|
|
},
|
|
{
|
|
id: "30",
|
|
platform: "PayPal",
|
|
icon: "🅿️",
|
|
title: "Paypal DR 97 DA 95 Traffic",
|
|
},
|
|
{
|
|
id: "31",
|
|
platform: "Apple Music",
|
|
icon: "🎵",
|
|
title: "Apple Music DR 97 DA 95 Traffic",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Web 2.0",
|
|
count: 2,
|
|
color: "bg-[rgba(31,228,84,0.16)]",
|
|
highlight: "bg-[#34A853]",
|
|
items: [
|
|
{
|
|
id: "32",
|
|
platform: "Pinterest",
|
|
icon: "🅿️",
|
|
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
const CategorySection = ({ category }: { category: Category }) => (
|
|
<div className="mb- bg-white pt-1">
|
|
<div className={`${category.color} px-3 py-2 mt-2 mb-2 ml-2 mr-2 rounded-xl border-blue-500`}>
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-5 ${category.highlight} rounded`}></div>
|
|
|
|
<span className="font-semibold text-lg text-[#2B2D3B]">{category.name}</span>
|
|
<span className="text-[#2B2D3B] text-lg font-semibold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white border border-l-0 border-r-0 rounded-b-md">
|
|
{category.items.map((item) => (
|
|
<div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl mt-0.5">{item.icon}</span>
|
|
<span
|
|
className={`text-md font-normal text-blue-600 hover:text-blue-800 ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
|
|
>
|
|
{item.title}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className="p-2 bg-gray-50">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{columns.map((column, index) => (
|
|
<div key={index} className="bg-[#f6f6fa] rounded-lg">
|
|
<div className=" p-4 rounded-t-lg border-0 rounded-b-xl">
|
|
{/* shadow-[0_4px_8px_0_rgba(0,0,0,0.08)] */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
|
|
<span className="text-[#2B2D3B] bg-[#e9eaf1] px-2 py-1 rounded-full text-md font-semibold">
|
|
{column.count}
|
|
</span>
|
|
</div>
|
|
{column.date && <span className="text-sm text-gray-500 font-medium">{column.date}</span>}
|
|
</div>
|
|
</div>
|
|
<div className=' custom-scrollbar rounded-xl ' style={{ border: 0}}>
|
|
{column.categories.map((category, categoryIndex) => (
|
|
<CategorySection key={categoryIndex} category={category} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IntegratedStrategy
|