ZigZag

npx shadcn@latest add "https://designpass.dev/r/ZigZag-TS-TW.json"

/*!
 * ZigZag, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/zig-zag
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import { useId, type CSSProperties } from "react";

export type ZigZagProps = {
  /** Fill color of the section BELOW. */
  fill?: string;
  /** Edge height in px. Tooth size scales from this. */
  height?: number;
  /**
   * Tooth width as a multiple of `height` (tooth width = height × width).
   * Values under 1 make skinny teeth; over 2 make wide ones.
   */
  width?: number;
  /**
   * Tip roundness from 0 (sharp) to 1 (fully soft).
   */
  rounding?: number;
  /**
   * Rotate 180°. Use when parking the edge on the top of the lower
   * section instead of the bottom of the upper section.
   */
  flip?: boolean;
  className?: string;
  style?: CSSProperties;
};

function toothPath(w: number, h: number, rounding: number): string {
  const mid = w / 2;
  // Tip centered, valleys at tile edges so pattern seams stay clean.
  const s = Math.min(0.5, Math.max(0, rounding) * 0.5);

  if (s < 0.002) {
    return `M0,${h} L${mid},0 L${w},${h} L${w},${h} L0,${h} Z`;
  }

  // Trim the flanks, then quadratic through the tip for variable soft peaks.
  const left = { x: mid * (1 - s), y: h * s };
  const right = { x: mid + mid * s, y: h * s };
  return `M0,${h} L${left.x},${left.y} Q${mid},0 ${right.x},${right.y} L${w},${h} L${w},${h} L0,${h} Z`;
}

/**
 * Geometric zigzag / sawtooth edge. Each tooth keeps a stable shape via
 * `width` (tooth width = height × width), tiled across the full band.
 * `rounding` softens tips from sharp to fully curved. `fill` matches the
 * lower band.
 */
export default function ZigZag({
  fill = "#fafafa",
  height = 4,
  width = 2,
  rounding = 0,
  flip = false,
  className = "",
  style,
}: ZigZagProps) {
  const patternId = useId().replace(/:/g, "");
  const h = Math.max(1, height);
  const toothW = Math.max(2, h * Math.min(8, Math.max(0.35, width)));
  const roundAmt = Math.min(1, Math.max(0, rounding));

  return (
    <div
      aria-hidden
      className={`pointer-events-none absolute inset-x-0 bottom-0 w-full overflow-hidden leading-[0] ${
        flip ? "rotate-180" : ""
      } ${className}`.trim()}
      style={{ height: h, ...style }}
    >
      <svg width="100%" height={h} className="block w-full" preserveAspectRatio="none">
        <defs>
          <pattern
            id={patternId}
            width={toothW}
            height={h}
            patternUnits="userSpaceOnUse"
          >
            <path fill={fill} d={toothPath(toothW, h, roundAmt)} />
          </pattern>
        </defs>
        <rect width="100%" height={h} fill={`url(#${patternId})`} />
      </svg>
    </div>
  );
}