bg-image-texture-demo

1"use client"
2 
3import { useState } from "react"
4import { Download } from "lucide-react"
5 
6import { Button } from "@/components/ui/button"
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card"
14import { Label } from "@/components/ui/label"
15import { Slider } from "@/components/ui/slider"
16import { BackgroundImageTexture } from "@/registry/default/ui/bg-image-texture"
17import type { TextureVariant } from "@/registry/default/ui/bg-image-texture"
18 
19const textureVariants: TextureVariant[] = [
20  "fabric-of-squares",
21  "grid-noise",
22  "inflicted",
23  "debut-light",
24  "groovepaper",
25  "none",
26]
27 
28const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
29  "fabric-of-squares": "/textures/fabric-of-squares.png",
30  "grid-noise": "/textures/grid-noise.png",
31  inflicted: "/textures/inflicted.png",
32  "debut-light": "/textures/debut-light.png",
33  groovepaper: "/textures/groovepaper.png",
34}
35 
36async function downloadTexture(variant: Exclude<TextureVariant, "none">) {
37  const url = textureMap[variant]
38  try {
39    const response = await fetch(url)
40    const blob = await response.blob()
41    const blobUrl = window.URL.createObjectURL(blob)
42    const link = document.createElement("a")
43    link.href = blobUrl
44    link.download = `${variant}.png`
45    document.body.appendChild(link)
46    link.click()
47    document.body.removeChild(link)
48    window.URL.revokeObjectURL(blobUrl)
49  } catch {
50    // Fallback to direct link if fetch fails
51    const link = document.createElement("a")
52    link.href = url
53    link.download = `${variant}.png`
54    document.body.appendChild(link)
55    link.click()
56    document.body.removeChild(link)
57  }
58}
59 
60export default function BackgroundImageTextureDemo() {
61  const [selectedVariant, setSelectedVariant] =
62    useState<TextureVariant>("fabric-of-squares")
63  const [opacity, setOpacity] = useState([0.5])
64 
65  return (
66    <div className="space-y-8 p-6">
67      {/* Controls */}
68      <Card>
69        <CardHeader>
70          <CardTitle>Texture Controls</CardTitle>
71          <CardDescription>
72            Select a texture variant and adjust the opacity
73          </CardDescription>
74        </CardHeader>
75        <CardContent className="space-y-6">
76          <div className="space-y-2">
77            <Label>Texture Variant</Label>
78            <div className="flex flex-wrap gap-2">
79              {textureVariants.map((variant) => (
80                <Button
81                  key={variant}
82// … truncated