Texture Overlay

import { TextureOverlay } from "@/components/vritti/texture-overlay"

export function TextureOverlayExample() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 p-8">
      {(["dots", "grid", "crosshatch", "diagonal", "halftone", "paperGrain"] as const).map((texture) => (
        <div key={texture} className="relative h-32 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 overflow-hidden">
          <TextureOverlay texture={texture} />
          <div className="absolute inset-0 flex items-end p-3">
            <span className="text-xs font-medium text-white/90">{texture}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

import { TextureOverlay } from "@/components/vritti/texture-overlay"
import type { TextureType } from "@/components/vritti/texture-overlay"

const allTextures: TextureType[] = [
  "dots", "grid", "noise", "crosshatch", "diagonal", "scatteredDots",
  "halftone", "triangular", "chevron", "paperGrain", "horizontalLines", "verticalLines"
]

export function TextureOverlayAllExample() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 p-8">
      {allTextures.map((texture) => (
        <div key={texture} className="relative h-24 rounded-lg bg-muted dark:bg-neutral-800 overflow-hidden">
          <TextureOverlay texture={texture} />
          <div className="absolute inset-0 flex items-end p-2">
            <span className="text-[10px] font-medium text-foreground/70">{texture}</span>
          </div>
        </div>
      ))}
    </div>
  )
}