INit

resources/js/components/ui/placeholder-pattern.tsx

@@ -0,0 +1,20 @@
+import { useId } from 'react';
+
+interface PlaceholderPatternProps {
+    className?: string;
+}
+
+export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
+    const patternId = useId();
+
+    return (
+        <svg className={className} fill="none">
+            <defs>
+                <pattern id={patternId} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                </pattern>
+            </defs>
+            <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>
+        </svg>
+    );
+}