Badge Preview

1/**
2 * shieldcn
3 * BadgePreview
4 * by Justin Levine
5 * shieldcn.dev
6 *
7 * Visual badge preview component for documentation pages and app UIs.
8 * Renders a live badge image with an optional copyable code snippet below.
9 *
10 * Props:
11 * - src: badge image URL
12 * - alt?: accessible alt text (default "badge")
13 * - code?: code snippet to display below the badge
14 * - label?: optional label above the badge
15 * - mode?: background mode ("dark" | "light", default "dark")
16 * - className?: additional class names
17 */
18 
19"use client"
20 
21import * as React from "react"
22import { cn } from "@/lib/utils"
23 
24interface BadgePreviewProps extends React.ComponentProps<"div"> {
25  /** Badge image URL. */
26  src: string
27  /** Accessible alt text. @default "badge" */
28  alt?: string
29  /** Code snippet to display below the badge. */
30  code?: string
31  /** Optional label above the badge. */
32  label?: string
33  /** Background mode. @default "dark" */
34  mode?: "dark" | "light"
35  /** Additional class names. */
36  className?: string
37}
38 
39function BadgePreview({
40  src,
41  alt = "badge",
42  code,
43  label,
44  mode = "dark",
45  className,
46  ...props
47}: BadgePreviewProps) {
48  const [copied, setCopied] = React.useState(false)
49 
50  const handleCopy = React.useCallback(() => {
51    if (!code) return
52    navigator.clipboard.writeText(code)
53    setCopied(true)
54    setTimeout(() => setCopied(false), 2000)
55  }, [code])
56 
57  return (
58    <div
59      data-slot="badge-preview"
60      className={cn(
61        "overflow-hidden rounded-lg border border-border",
62        className
63      )}
64      {...props}
65    >
66      {label && (
67        <div className="border-b border-border px-4 py-2">
68          <span className="text-xs font-medium text-muted-foreground">
69            {label}
70          </span>
71        </div>
72      )}
73 
74      <div
75        className={cn(
76          "flex items-center justify-center px-6 py-8",
77          mode === "dark" ? "bg-zinc-950" : "bg-zinc-100"
78        )}
79      >
80        {/* eslint-disable-next-line @next/next/no-img-element */}
81        <img
82          src={src}
83          alt={alt}
84          className="inline-block max-w-full"
85          loading="lazy"
86          decoding="async"
87        />
88      </div>
89 
90      {code && (
91        <div className="relative border-t border-border bg-muted/30">
92          <pre className="overflow-x-auto px-4 py-3">
93            <code className="text-xs text-muted-foreground">{code}</code>
94          </pre>
95          <button
96            type="button"
97            onClick={handleCopy}
98// … truncated