80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { Container } from "lucide-react";
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import { ContainerForm } from "./container-form";
|
|
import type { ContainerDto } from "../server/queries";
|
|
|
|
type Props = { containers: ContainerDto[] };
|
|
|
|
export function ContainerList({ containers }: Props) {
|
|
const [showNew, setShowNew] = useState(false);
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold">Containers</h2>
|
|
<button className="btn btn-primary btn-sm" onClick={() => setShowNew(true)}>
|
|
New container
|
|
</button>
|
|
</div>
|
|
|
|
{showNew && (
|
|
<div className="card p-4">
|
|
<h3 className="font-medium mb-3">New container</h3>
|
|
<ContainerForm
|
|
onSuccess={() => {
|
|
setShowNew(false);
|
|
router.refresh();
|
|
}}
|
|
onCancel={() => setShowNew(false)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{containers.length === 0 && !showNew && (
|
|
<Empty className="border-none">
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<Container />
|
|
</EmptyMedia>
|
|
<EmptyTitle>No containers yet</EmptyTitle>
|
|
<EmptyDescription>Add a container to start organising your plants.</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
)}
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{containers.map((c) => (
|
|
<Link
|
|
key={c.id}
|
|
href={`/garden/containers/${c.id}`}
|
|
className="card p-4 hover:bg-[var(--surface-2)] transition-colors"
|
|
>
|
|
{c.coverImageUrl && (
|
|
<img src={c.coverImageUrl} alt="" className="w-full h-32 object-cover rounded mb-3" />
|
|
)}
|
|
<div className="flex items-start justify-between gap-2">
|
|
<span className="font-medium leading-tight">{c.name}</span>
|
|
<span className="badge badge-outline text-xs shrink-0 capitalize">{c.type}</span>
|
|
</div>
|
|
<p className="text-sm text-[var(--ink-mute)] mt-1">
|
|
{c.plantCount} {c.plantCount === 1 ? "plant" : "plants"}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|