🎉 chore(init): project initialization

2024-11-14 01:22:43 +07:00
commit 829edfa824
479 changed files with 61413 additions and 0 deletions
@@ -0,0 +1,61 @@
+import { useId } from 'react';
+
+import { cn } from '../../lib/utils';
+
+interface GridPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  squares?: Array<[x: number, y: number]>;
+  strokeDasharray?: string;
+  className?: string;
+  [key: string]: unknown;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = '0',
+  squares,
+  className,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden='true'
+      className={cn(
+        'pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30',
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern id={id} width={width} height={height} patternUnits='userSpaceOnUse' x={x} y={y}>
+          <path d={`M.5 ${height}V.5H${width}`} fill='none' strokeDasharray={strokeDasharray} />
+        </pattern>
+      </defs>
+      <rect width='100%' height='100%' strokeWidth={0} fill={`url(#${id})`} />
+      {squares && (
+        <svg x={x} y={y} className='overflow-visible'>
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth='0'
+              key={`${x}-${y}`}
+              width={width - 1}
+              height={height - 1}
+              x={x * width + 1}
+              y={y * height + 1}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}
+
+export default GridPattern;