47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import Link from 'next/link'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
interface Product {
|
|
id: string
|
|
name: string
|
|
description: string | null
|
|
}
|
|
|
|
interface ProductPickerProps {
|
|
products: Product[]
|
|
}
|
|
|
|
export function ProductPicker({ products }: ProductPickerProps) {
|
|
return (
|
|
<div className="p-6 max-w-2xl mx-auto w-full" {...debugProps('product-picker', 'ProductPicker', 'components/solo/product-picker.tsx')}>
|
|
<h1 className="text-xl font-medium text-foreground mb-2">Solo bord</h1>
|
|
<p className="text-sm text-muted-foreground mb-6">
|
|
Kies een product om je persoonlijke Kanban-bord te openen.
|
|
</p>
|
|
|
|
{products.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<p className="text-sm text-muted-foreground mb-3">Je hebt nog geen producten.</p>
|
|
<Link href="/products/new" className="text-sm text-primary hover:underline">
|
|
+ Nieuw product aanmaken
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-2">
|
|
{products.map(product => (
|
|
<Link
|
|
key={product.id}
|
|
href={`/products/${product.id}/solo`}
|
|
className="flex flex-col gap-0.5 px-4 py-3 rounded-lg border border-border bg-surface-container hover:bg-surface-container-high transition-colors"
|
|
>
|
|
<span className="text-sm font-medium text-foreground">{product.name}</span>
|
|
{product.description && (
|
|
<span className="text-xs text-muted-foreground line-clamp-1">{product.description}</span>
|
|
)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|