Fade

import { Fade, Panel } from "density-base-ui";

const fadeDirections = [
  "fade-out-top",
  "fade-out-right",
  "fade-out-bottom",
  "fade-out-left",
] as const;

export default function FadeExample() {
  return (
    <Panel
      density-level="2"
      style={styles.frame}
      aria-label="Fade directions over SVG pattern"
    >
      <svg aria-hidden="true" viewBox="0 0 420 180" style={styles.pattern}>
        <defs>
          <pattern
            id="fade-example-pattern"
            width="28"
            height="28"
            patternUnits="userSpaceOnUse"
          >
            <path
              d="M 28 0 H 0 V 28"
              fill="none"
              stroke="currentColor"
              strokeOpacity="0.28"
              strokeWidth="1"
            />
          </pattern>
        </defs>
        <rect width="420" height="180" fill="url(#fade-example-pattern)" />
      </svg>
      {fadeDirections.map((direction) => (
        <Fade
          key={direction}
          density-level="2"
          direction={direction}
          style={styles.fade}
        />
      ))}
    </Panel>
  );
}

const styles = {
  frame: {
    position: "relative",
    minHeight: "12rem",
    overflow: "hidden",
    color: "var(--dn-color-text)",
  },
  pattern: {
    display: "block",
    width: "100%",
    height: "12rem",
  },
  fade: {
    "--dn-fade-size": "4rem",
  },
} as const;