1"use client";
2
3import { useState } from "react";
4import { Button, PageTitle, RenderIcon, StatusPill } from "@versable-git/ui";
5
6// Five shipping shapes of one header row. The identity disc and the loading
7// state are the variant axes: a plain Icon, a theme-colored chip riding the
8// avatar slot (a custom title span would skip the kit's h1 styling and drift
9// off the house size, so the tile rides the identity slot instead), the
10// skeleton mirroring whichever slots the loaded row will use, and a
11// back-linked detail header.
12export function PageTitleVariants() {
13  const [loaded, setLoaded] = useState(true);
14
15  return (
16    <div className="flex flex-col gap-8">
17      <div className="flex flex-col gap-2">
18        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Plain icon + toolbar</span>
19        <PageTitle
20          Icon="Table"
21          title="Jobs"
22          subtitle="Each time you run a module, it shows up here."
23          actions={<Button color="primary" size="sm" Icon="Success" content="New job" />}
24        />
25      </div>
26
27      <div className="flex flex-col gap-2">
28        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Themed identity chip</span>
29        <PageTitle
30          avatar={<RenderIcon Icon="Refresh" size={18} />}
31          iconWrapClassName="bg-success/10 text-success rounded-lg"
32          title="Workflow"
33          subtitle="Chain modules into one run."
34        />
35      </div>
36
37      <div className="flex flex-col gap-2">
38        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Status pill beside the title</span>
39        <PageTitle
40          Icon="Table"
41          title="Jobs"
42          subtitle="Runs across every module."
43          titleExtra={
44            <StatusPill kind="review" size="sm" count={3}>
45              in review
46            </StatusPill>
47          }
48        />
49      </div>
50
51      <div className="flex flex-col gap-2">
52        <div className="flex items-center justify-between">
53          <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Loading skeleton</span>
54          <Button
55            size="xs"
56            variant="outline"
57            content={loaded ? "Reload" : "Loaded"}
58            onClick={() => setLoaded((v) => !v)}
59          />
60        </div>
61        <PageTitle
62          skeleton={!loaded}
63          Icon="Table"
64          title="Jobs"
65          subtitle="Each time you run a module, it shows up here."
66          actions={<Button color="primary" size="sm" Icon="Success" content="New job" />}
67        />
68      </div>
69
70      <div className="flex flex-col gap-2">
71        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Back-linked detail header</span>
72        <PageTitle
73          Icon="Refresh"
74          back={
75            <a href="#jobs" onClick={(e) => e.preventDefault()}>
76              Back to Jobs
77            </a>
78          }
79          title="Run 4"
80          subtitle="Brake pads Q3 · started 9m ago"
81          actions={<Button variant="outline" size="sm" content="View log" />}
82        />
83      </div>
84    </div>
85  );
86}
87