Dither Pattern

"use client";

import { DitherPattern, DITHER_PRESETS } from "@/components/vritti/dither-pattern";

export function DitherPatternExample() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 p-4">
      {/* B&W Bayer4 */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="bayer4"
          gradientType="linear"
          palette={[...DITHER_PRESETS.bw.palette]}
          percentages={[...DITHER_PRESETS.bw.percentages]}
          width={320}
          height={180}
          cellSize={6}
          angle={45}
        />
      </div>

      {/* GameBoy Halftone */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="halftone"
          gradientType="radial"
          palette={[...DITHER_PRESETS.gameboy.palette]}
          percentages={[...DITHER_PRESETS.gameboy.percentages]}
          width={320}
          height={180}
          cellSize={8}
          shape="circle"
        />
      </div>

      {/* Sepia Lines */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="lines"
          gradientType="conic"
          palette={[...DITHER_PRESETS.sepia.palette]}
          percentages={[...DITHER_PRESETS.sepia.percentages]}
          width={320}
          height={180}
          cellSize={6}
        />
      </div>

      {/* CGA Dots */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="dots"
          gradientType="linear"
          palette={[...DITHER_PRESETS.cga.palette]}
          percentages={[...DITHER_PRESETS.cga.percentages]}
          width={320}
          height={180}
          cellSize={8}
          angle={135}
          shape="circle"
        />
      </div>

      {/* Neon Bayer8 scaled */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="bayer8"
          gradientType="radial"
          style="scaled"
          palette={[...DITHER_PRESETS.neon.palette]}
          percentages={[...DITHER_PRESETS.neon.percentages]}
          width={320}
          height={180}
          cellSize={8}
          shape="square"
        />
      </div>

      {/* Rust Scales */}
      <div className="rounded-lg overflow-hidden aspect-video">
        <DitherPattern
          pattern="scales"
          gradientType="noise"
          palette={[...DITHER_PRESETS.rust.palette]}
          percentages={[...DITHER_PRESETS.rust.percentages]}
          width={320}
          height={180}
          cellSize={10}
          shape="diamond"
        />
      </div>
    </div>
  );
}