bg-image-texture

1import type React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export type TextureVariant =
6  | "fabric-of-squares"
7  | "grid-noise"
8  | "inflicted"
9  | "debut-light"
10  | "groovepaper"
11  | "none"
12 
13interface BackgroundImageTextureProps {
14  variant?: TextureVariant
15  opacity?: number
16  className?: string
17  children?: React.ReactNode
18}
19 
20const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
21  "fabric-of-squares": "/textures/fabric-of-squares.png",
22  "grid-noise": "/textures/grid-noise.png",
23  inflicted: "/textures/inflicted.png",
24  "debut-light": "/textures/debut-light.png",
25  groovepaper: "/textures/groovepaper.png",
26}
27 
28export function BackgroundImageTexture({
29  variant = "fabric-of-squares",
30  opacity = 0.5,
31  className,
32  children,
33}: BackgroundImageTextureProps) {
34  const textureUrl = variant !== "none" ? textureMap[variant] : null
35 
36  return (
37    <div className={cn("relative", className)}>
38      {textureUrl && (
39        <div
40          aria-hidden="true"
41          className="pointer-events-none absolute inset-0"
42          style={{
43            backgroundImage: `url(${textureUrl})`,
44            backgroundRepeat: "repeat",
45            opacity,
46          }}
47        />
48      )}
49      {children && <div className="relative">{children}</div>}
50    </div>
51  )
52}