47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
|
import { Link } from 'react-router-dom'
|
||
|
|
import type { ComponentType } from 'react'
|
||
|
|
|
||
|
|
interface SectionCardProps {
|
||
|
|
label: string
|
||
|
|
description?: string
|
||
|
|
to: string
|
||
|
|
icon?: ComponentType<{ size?: number; className?: string }>
|
||
|
|
comingSoon?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SectionCard({ label, description, to, icon: Icon, comingSoon }: SectionCardProps) {
|
||
|
|
if (comingSoon) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-start gap-3 p-4 rounded-xl border border-[#2a2d3e] bg-[#0f1117] opacity-50 cursor-not-allowed select-none">
|
||
|
|
{Icon && (
|
||
|
|
<div className="w-8 h-8 rounded-lg bg-[#1e2130] flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
|
|
<Icon size={15} className="text-[#475569]" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className="text-[#64748b] text-sm font-medium truncate">{label}</p>
|
||
|
|
{description && <p className="text-[#374151] text-xs mt-0.5 line-clamp-2">{description}</p>}
|
||
|
|
<span className="inline-block mt-1 text-[10px] text-[#374151] border border-[#2a2d3e] rounded px-1.5 py-0.5">Coming soon</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
to={to}
|
||
|
|
className="flex items-start gap-3 p-4 rounded-xl border border-[#2a2d3e] bg-[#0f1117] hover:bg-[#1a1d27] hover:border-indigo-500/40 transition-colors group"
|
||
|
|
>
|
||
|
|
{Icon && (
|
||
|
|
<div className="w-8 h-8 rounded-lg bg-indigo-600/10 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-indigo-600/20 transition-colors">
|
||
|
|
<Icon size={15} className="text-indigo-400" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className="text-[#cbd5e1] text-sm font-medium truncate group-hover:text-white transition-colors">{label}</p>
|
||
|
|
{description && <p className="text-[#475569] text-xs mt-0.5 line-clamp-2">{description}</p>}
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
}
|