1"use client";
2
3import { Button, Card, Kicker, Skeleton } from "@versable-git/ui";
4import { useState } from "react";
5
6// The technique: page and skeleton draw into the SAME container map, so a
7// placeholder can never come out narrower or shorter than the page it covers.
8const PANEL = {
9  list: "flex w-full flex-col gap-3",
10};
11
12const rows = [
13  { name: "brake-pads-q3.xlsx", state: "Ingested" },
14  { name: "fitment-update.csv", state: "Mapping" },
15  { name: "lighting-full.xml", state: "Queued" },
16];
17
18function RealList() {
19  return (
20    <div className={PANEL.list}>
21      <Card title="Files" subtitle="3 in this job" noAnimate>
22        <ul className="flex flex-col gap-2">
23          {rows.map((r) => (
24            <li key={r.name} className="flex justify-between text-sm">
25              <span className="truncate">{r.name}</span>
26              <span className="text-base-content/50">{r.state}</span>
27            </li>
28          ))}
29        </ul>
30      </Card>
31    </div>
32  );
33}
34
35function MatchedSkeleton() {
36  return (
37    <div className={PANEL.list}>
38      <Card noAnimate>
39        <Skeleton className="mb-1 h-5 w-16" />
40        <Skeleton className="mb-4 h-3 w-24" />
41        <div className="flex flex-col gap-2">
42          {rows.map((r) => (
43            <div key={r.name} className="flex justify-between">
44              <Skeleton className="h-4 w-40" />
45              <Skeleton className="h-4 w-16" />
46            </div>
47          ))}
48        </div>
49      </Card>
50    </div>
51  );
52}
53
54// A toggle swaps which column holds which state. Nothing resizes when it
55// flips, because both columns draw from the same PANEL.list container.
56export function ShapeMatchedSkeleton() {
57  const [swapped, setSwapped] = useState(false);
58  const left = swapped ? <MatchedSkeleton /> : <RealList />;
59  const right = swapped ? <RealList /> : <MatchedSkeleton />;
60  const leftLabel = swapped ? "Its skeleton, same PANEL box" : "The real page";
61  const rightLabel = swapped ? "The real page" : "Its skeleton, same PANEL box";
62  return (
63    <Card
64      title="The page beside its skeleton"
65      subtitle="Both columns draw from the same PANEL container, so the swap proves the shapes match."
66      // The swap is a card action, so it sits in the toolbar with a shade and
67      // an icon (doc 60 §6), never in a row of its own under the title.
68      toolbar={
69        <Button
70          size="sm"
71          variant="text"
72          shade
73          Icon="Swap"
74          content={swapped ? "Swap back" : "Swap sides"}
75          onClick={() => setSwapped((v) => !v)}
76        />
77      }
78    >
79      <div className="grid gap-6 md:grid-cols-2">
80        <div className="flex flex-col gap-2">
81          <Kicker variant="bricked">{leftLabel}</Kicker>
82          {left}
83        </div>
84        <div className="flex flex-col gap-2">
85          <Kicker variant="bricked">{rightLabel}</Kicker>
86          {right}
87        </div>
88      </div>
89    </Card>
90  );
91}
92