border-beam-button-demo

1"use client"
2 
3import { useEffect, useId, useState, type ReactNode } from "react"
4import type { BorderBeamColorVariant } from "border-beam"
5import { ArrowRight, Pause, Play, Sparkles, Wand2, Zap } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8import {
9  BorderBeamButton,
10  BorderBeamIconButton,
11} from "@/registry/default/ui/border-beam-button"
12 
13const COLOR_ROW: { key: BorderBeamColorVariant; label: string }[] = [
14  { key: "colorful", label: "Colorful" },
15  { key: "ocean", label: "Ocean" },
16  { key: "sunset", label: "Sunset" },
17  { key: "mono", label: "Mono" },
18]
19 
20const BEAM_SIZES = ["sm", "md", "line"] as const
21 
22function Section({
23  title,
24  description,
25  children,
26}: {
27  title: string
28  description?: string
29  children: ReactNode
30}) {
31  return (
32    <section className="space-y-4">
33      <div className="space-y-1">
34        <h3 className="font-semibold text-foreground text-sm tracking-tight">
35          {title}
36        </h3>
37        {description ? (
38          <p className="text-pretty text-muted-foreground text-xs leading-relaxed">
39            {description}
40          </p>
41        ) : null}
42      </div>
43      {children}
44    </section>
45  )
46}
47 
48export default function BorderBeamButtonDemo() {
49  const id = useId()
50  const [beamActive, setBeamActive] = useState(true)
51  const [respectsReducedMotion, setRespectsReducedMotion] = useState(false)
52 
53  useEffect(() => {
54    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
55    const sync = () => setRespectsReducedMotion(mq.matches)
56    sync()
57    mq.addEventListener("change", sync)
58    return () => mq.removeEventListener("change", sync)
59  }, [])
60 
61  const effectiveActive = beamActive && !respectsReducedMotion
62 
63  return (
64    <div className="mx-auto w-full max-w-3xl space-y-10 px-4 py-8 md:px-6">
65      <header className="space-y-2 text-center">
66        <p className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.2em]">
67          Border beam
68        </p>
69        <h2 className="font-semibold text-foreground text-xl tracking-tight md:text-2xl">
70          Button + traveling glow
71        </h2>
72        <p className="mx-auto max-w-lg text-pretty text-muted-foreground text-sm leading-relaxed">
73          <span className="text-foreground/90">className</span> targets the
74          shadcn <span className="text-foreground/90">Button</span>;{" "}
75          <span className="text-foreground/90">borderBeamClassName</span> styles
76          the beam wrapper. Use{" "}
77// … truncated