Showcase wall

"use client";
import { ShowcaseSurface, ShowcaseWall } from "@/components/ui/notchset/blocks/showcase-wall";
import { ForecastBar } from "@/components/ui/notchset/blocks/forecast-bar";
import { TickBar } from "@/components/ui/notchset/tick-bar";

/* any piece goes in a tile; the wall only frames and paces them */
export default function ShowcaseWallDemo() {
  return (
    <ShowcaseWall
      eager
      tiles={[
        {
          id: "forecast",
          title: "Forecast bar",
          hint: "Won, commit and best case against target",
          span: 7,
          wash: "sage",
          height: 280,
          content: (
            <ShowcaseSurface className="max-w-[460px]">
              <ForecastBar won={420} commit={310} best={180} target={1200} call={1180} size="lg" label="Team forecast against target" />
            </ShowcaseSurface>
          ),
        },
        {
          id: "quota",
          title: "Tick bar",
          hint: "How far toward the target",
          span: 5,
          wash: "ink",
          height: 280,
          content: (
            <ShowcaseSurface className="max-w-[320px]">
              <TickBar label="Won and committed against target" value={1_420_000} done={680_000} max={2_000_000} figure="71%" valueText="$1.42M of $2M" />
            </ShowcaseSurface>
          ),
        },
      ]}
    />
  );
}