Buttons

1"use client";
2
3import Link from "next/link";
4import { ArrowRight } from "lucide-react";
5import { RippleButton } from "@/registry/ui/ripple-button";
6import { TrailButton } from "@/registry/ui/trail-button";
7import { GlitchButton } from "@/registry/ui/glitch-button";
8import { LiquidButton } from "@/registry/ui/liquid-button";
9import { NoiseButton } from "@/registry/ui/noise-button";
10import { TactileButton } from "@/registry/ui/tactile-button";
11import { SpotlightButton } from "@/registry/ui/spotlight-button";
12import { TiltButton } from "@/registry/ui/tilt-button";
13import { DockButton } from "@/registry/ui/dock-button";
14import { PixelButton } from "@/registry/ui/pixel-button";
15import { TerminalButton } from "@/registry/ui/terminal-button";
16import { CountdownButton } from "@/registry/ui/countdown-button";
17import { CopyButton } from "@/registry/ui/copy-button";
18import { ConfirmButton } from "@/registry/ui/confirm-button";
19import { ExpandButton } from "@/registry/ui/expand-button";
20import { ShimmerButton } from "@/registry/ui/shimmer-button";
21
22type ButtonEntry = {
23  slug: string;
24  label: string;
25  preview: React.ReactNode;
26};
27
28const BUTTONS: ButtonEntry[] = [
29  {
30    slug: "ripple-button",
31    label: "Ripple",
32    preview: <RippleButton>Click me</RippleButton>,
33  },
34  {
35    slug: "trail-button",
36    label: "Trail",
37    preview: <TrailButton>Hover me</TrailButton>,
38  },
39  {
40    slug: "glitch-button",
41    label: "Glitch",
42    preview: <GlitchButton>Glitch</GlitchButton>,
43  },
44  {
45    slug: "liquid-button",
46    label: "Liquid",
47    preview: <LiquidButton>Liquid</LiquidButton>,
48  },
49  {
50    slug: "noise-button",
51    label: "Noise",
52    preview: <NoiseButton>Noise</NoiseButton>,
53  },
54  {
55    slug: "tactile-button",
56    label: "Tactile",
57    preview: <TactileButton>Tactile</TactileButton>,
58  },
59  {
60    slug: "spotlight-button",
61    label: "Spotlight",
62    preview: <SpotlightButton>Spotlight</SpotlightButton>,
63  },
64  {
65    slug: "expand-button",
66    label: "Expand",
67    preview: <ExpandButton username="@username">Follow</ExpandButton>,
68  },
69  {
70    slug: "tilt-button",
71    label: "Tilt",
72    preview: <TiltButton>Tilt</TiltButton>,
73  },
74  {
75    slug: "dock-button",
76    label: "Dock",
77    preview: <DockButton>Dock</DockButton>,
78  },
79  {
80    slug: "pixel-button",
81    label: "Pixel",
82    preview: <PixelButton>Pixel</PixelButton>,
83  },
84  {
85    slug: "terminal-button",
86    label: "Terminal",
87    preview: <TerminalButton>Terminal</TerminalButton>,
88  },
89  {
90    slug: "countdown-button",
91    label: "Countdown",
92    preview: (
93      <CountdownButton seconds={3} variant="primary">
94        Hold me
95      </CountdownButton>
96    ),
97  },
98  {
99    slug: "copy-button",
100    label: "Copy",
101    preview: <CopyButton value="npm install">Copy</CopyButton>,
102  },
103  {
104    slug: "confirm-button",
105    label: "Confirm",
106    preview: (
107      <ConfirmButton label="Delete" onConfirm={() => Promise.resolve()} />
108    ),
109  },
110  {
111    slug: "shimmer-button",
112    label: "Shimmer",
113    preview: <ShimmerButton>Shimmer</ShimmerButton>,
114  },
115];
116
117export function ButtonShowcase() {
118  return (
119    <div className="grid grid-cols-2 gap-3 p-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
120      {BUTTONS.map(({ slug, label, preview }) => (
121        <div
122          key={slug}
123          className="group relative flex flex-col items-center gap-3 rounded-lg border border-border/50 bg-muted/20 p-4 transition-colors hover:border-border hover:bg-muted/40"
124        >
125          <div className="flex min-h-[44px] items-center justify-center">
126            {preview}
127          </div>
128          <div className="flex w-full items-center justify-between">
129            <span className="text-xs font-medium text-muted-foreground">
130              {label}
131            </span>
132            <Link
133              href={`/components/${slug}`}
134              className="flex items-center gap-0.5 text-xs text-muted-foreground/60 opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground"
135            >
136              Install
137              <ArrowRight className="size-3" />
138            </Link>
139          </div>
140        </div>
141      ))}
142    </div>
143  );
144}