admin
91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import { listAllTags, listAllTagCategories, type TagSort } from "@/lib/db/queries";
|
|
import { createTagAction } from "@/app/actions/tags";
|
|
import { Tag, Plus, ArrowDownAZ, Hash } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { TagImportButton } from "@/components/tag/TagImportButton";
|
|
import { TagsList } from "@/components/tag/TagsList";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function TagsPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
|
}) {
|
|
const sp = await searchParams;
|
|
const sort: TagSort = sp.sort === "count" ? "count" : "az";
|
|
const tags = listAllTags(sort);
|
|
const categories = listAllTagCategories("az");
|
|
return (
|
|
<div className="max-w-[1600px] mx-auto px-6 py-6 fade-in">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-3xl font-semibold tracking-tight">Tags</h1>
|
|
<p className="text-[var(--color-fg-dim)] mt-1">{tags.length} total</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center rounded-lg glass overflow-hidden text-xs">
|
|
<Link
|
|
href="/tag"
|
|
className={cn(
|
|
"flex items-center gap-1 px-2.5 py-1.5",
|
|
sort === "az"
|
|
? "bg-[var(--color-cyan)] text-black font-medium"
|
|
: "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
|
|
)}
|
|
title="Sort A → Z"
|
|
>
|
|
<ArrowDownAZ className="w-3.5 h-3.5" /> A-Z
|
|
</Link>
|
|
<Link
|
|
href="/tag?sort=count"
|
|
className={cn(
|
|
"flex items-center gap-1 px-2.5 py-1.5",
|
|
sort === "count"
|
|
? "bg-[var(--color-cyan)] text-black font-medium"
|
|
: "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
|
|
)}
|
|
title="Sort by image count"
|
|
>
|
|
<Hash className="w-3.5 h-3.5" /> Count
|
|
</Link>
|
|
</div>
|
|
<TagImportButton
|
|
existingTagNames={tags.map((t) => t.name)}
|
|
existingCategoryNames={categories.map((c) => c.name)}
|
|
/>
|
|
<form action={createTagAction} className="flex items-center gap-2">
|
|
<input
|
|
name="name"
|
|
placeholder="New tag"
|
|
required
|
|
maxLength={48}
|
|
className="glass rounded-lg px-3 py-1.5 text-sm outline-none focus:border-[var(--color-cyan)] w-56"
|
|
/>
|
|
<button className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-[var(--color-cyan)] text-black font-medium">
|
|
<Plus className="w-4 h-4" /> Create
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{tags.length === 0 ? (
|
|
<div className="glass rounded-2xl p-card text-center">
|
|
<Tag className="w-8 h-8 mx-auto text-[var(--color-fg-dim)] mb-label" />
|
|
<p className="text-[var(--color-fg-dim)]">No tags yet. Create one above or add from any image.</p>
|
|
</div>
|
|
) : (
|
|
<TagsList tags={tags.map((t) => ({
|
|
id: t.id,
|
|
name: t.name,
|
|
count: t.count,
|
|
categoryId: t.categoryId,
|
|
categoryName: t.categoryName,
|
|
categoryColor: t.categoryColor,
|
|
}))} sort={sort} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|