36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
// src/blocks/KanbanHori/Component.tsx
|
|
import React from 'react'
|
|
|
|
type Card = { title: string; subtitle?: string }
|
|
type Row = { label: string; cards?: Card[] }
|
|
type Props = { rows?: Row[] }
|
|
|
|
export function KanbanHoriBlock({ rows }: Props) {
|
|
if (!Array.isArray(rows) || rows.length === 0) return null
|
|
|
|
return (
|
|
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
|
<div className="flex flex-col gap-4">
|
|
{rows.map((row, i) => (
|
|
<div key={i} className="grid grid-cols-[100px_1fr] gap-4 items-start">
|
|
<div className="text-xs font-medium text-foreground/50 text-right pr-4 pt-2.5 border-r border-foreground/10">
|
|
{row.label}
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
{Array.isArray(row.cards) &&
|
|
row.cards.map((card, j) => (
|
|
<div
|
|
key={j}
|
|
className="bg-muted/50 border border-foreground/8 rounded-lg px-3 py-2.5 flex flex-col gap-0.5 min-w-[120px]"
|
|
>
|
|
<p className="text-sm font-medium text-foreground/85">{card.title}</p>
|
|
{card.subtitle && <p className="text-xs text-foreground/40">{card.subtitle}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|