104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useTransition } from 'react'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import { CodeBadge } from '@/components/shared/code-badge'
|
|
import { restoreProductAction } from '@/actions/products'
|
|
|
|
interface Product {
|
|
id: string
|
|
name: string
|
|
code: string | null
|
|
description: string | null
|
|
repo_url: string | null
|
|
}
|
|
|
|
interface ProductListProps {
|
|
products: Product[]
|
|
isDemo: boolean
|
|
showArchived?: boolean
|
|
}
|
|
|
|
export function ProductList({ products, isDemo, showArchived = false }: ProductListProps) {
|
|
const router = useRouter()
|
|
const [, startTransition] = useTransition()
|
|
|
|
function handleRestore(id: string) {
|
|
startTransition(async () => {
|
|
const result = await restoreProductAction(id)
|
|
if ('error' in result) toast.error(result.error ?? 'Herstellen mislukt')
|
|
else { toast.success('Product hersteld'); router.refresh() }
|
|
})
|
|
}
|
|
|
|
if (products.length === 0) {
|
|
return (
|
|
<div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
|
|
<p className="text-muted-foreground">
|
|
{showArchived
|
|
? 'Geen gearchiveerde producten.'
|
|
: 'Je hebt nog geen producten aangemaakt.'}
|
|
</p>
|
|
{!isDemo && !showArchived && (
|
|
<Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
|
|
Maak je eerste product aan
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-3">
|
|
{products.map(product => (
|
|
<div
|
|
key={product.id}
|
|
onClick={() => !showArchived && router.push(`/products/${product.id}`)}
|
|
className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
|
|
showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
{product.code && <CodeBadge code={product.code} />}
|
|
<p className="font-medium text-foreground group-hover:text-primary transition-colors truncate">
|
|
{product.name}
|
|
</p>
|
|
</div>
|
|
{product.description && (
|
|
<p className="text-sm text-muted-foreground mt-1 line-clamp-1">
|
|
{product.description.slice(0, 80)}{product.description.length > 80 ? '…' : ''}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
{product.repo_url && (
|
|
<a
|
|
href={product.repo_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={e => e.stopPropagation()}
|
|
className="text-xs text-muted-foreground hover:text-primary underline"
|
|
>
|
|
Repo
|
|
</a>
|
|
)}
|
|
{showArchived && !isDemo && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
Herstellen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|