dhkatzandClaude Opus 5.5
07bbc11565
CI / test (push) Successful in 1m11s
The header shows T5DE's logo (the client's, also the tab icon) and Online, Rooms, Products and Catalogs; the person's pages (Account, Library, Console for moderators) and signing out are in a menu under their picture: their first linked IMVU account's avatar picture, which /me now gives (kept an hour), or their initial. Creating a product moves to Products (New product, /products/new; /create redirects there), as creating a room is on Rooms. Co-Authored-By: Claude Opus 5.5 <[email protected]>
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Empty, ProductCard } from "@/components/products";
|
|
import Link from "next/link";
|
|
import { PageHeader } from "@/components/status";
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { api, getMe, unwrap } from "@/lib/api";
|
|
|
|
export const metadata: Metadata = { title: "Products" };
|
|
|
|
export default async function Products({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
|
|
const raw = (await searchParams).q;
|
|
const q = typeof raw === "string" ? raw.trim().slice(0, 100) : "";
|
|
const [me, { products }] = await Promise.all([getMe(), api.products.get({ query: q ? { q } : {} }).then(unwrap)]);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<PageHeader title="Products">Community products for T5DE.</PageHeader>
|
|
{me && (
|
|
<Link href="/products/new" className={buttonVariants({ className: "px-4" })}>
|
|
New product
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<form action="/products" className="mb-6 flex w-full max-w-md gap-2">
|
|
<Input type="search" name="q" defaultValue={q} placeholder="Search products" aria-label="Search" />
|
|
<Button type="submit" variant="outline">
|
|
Search
|
|
</Button>
|
|
</form>
|
|
{products.length === 0 ? (
|
|
<Empty>{q ? "Nothing found." : "No products yet."}</Empty>
|
|
) : (
|
|
<ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{products.map((p) => (
|
|
<li key={p.id}>
|
|
<ProductCard product={p} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</>
|
|
);
|
|
}
|