All Dot Matrix Loaders

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { DotMatrixBase } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { trBlPathNormFromIndex } from "@/components/ui/dotmatrix-core";
8import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
9import type { DotAnimationResolver } from "@/components/ui/dotmatrix-core";
10import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type DotmSquare1Props = DotMatrixCommonProps;
13 
14const animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => {
15  if (!isActive) {
16    return { className: "dmx-inactive" };
17  }
18 
19  const path = trBlPathNormFromIndex(index);
20  const slice = row + (4 - col);
21  const parity = slice % 2;
22  const style = {
23    "--dmx-path": path,
24    "--dmx-diagonal-parity": parity
25  } as CSSProperties;
26 
27  if (reducedMotion || phase === "idle") {
28    return {
29      style: {
30        ...style,
31        opacity: parity === 0 ? 0.88 : 0.14
32      }
33    };
34  }
35 
36  return { className: "dmx-diagonal-alt-sweep", style };
37};
38 
39export function DotmSquare1({
40  speed = 1.1,
41  pattern = "full",
42  animated = true,
43  hoverAnimated = false,
44  ...rest
45}: DotmSquare1Props) {
46  const reducedMotion = usePrefersReducedMotion();
47  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
48    animated: Boolean(animated && !reducedMotion),
49    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
50    speed
51  });
52 
53  return (
54    <DotMatrixBase
55      {...rest}
56      size={rest.size ?? 36}
57      dotSize={rest.dotSize ?? 5}
58      speed={speed}
59      pattern={pattern}
60      animated={animated}
61      phase={matrixPhase}
62      onMouseEnter={onMouseEnter}
63      onMouseLeave={onMouseLeave}
64      reducedMotion={reducedMotion}
65      animationResolver={animationResolver}
66    />
67  );
68}