aboutsummaryrefslogtreecommitdiff
path: root/jb-ui/src/components/ui/dot-pattern.tsx
diff options
context:
space:
mode:
authorMax Nanis2026-09-10 17:46:41 -0700
committerMax Nanis2026-09-10 17:46:41 -0700
commited201936813d9a720b51e6cb40a05267b94e7314 (patch)
treef675f6a0d91ed1d17f654e40936e8c1ca9ccf141 /jb-ui/src/components/ui/dot-pattern.tsx
parent0ac38066402762dc5fa24f2ffa2170681a6eddb1 (diff)
downloadamt-jb-ed201936813d9a720b51e6cb40a05267b94e7314.tar.gz
amt-jb-ed201936813d9a720b51e6cb40a05267b94e7314.zip
Typescript prettier
Committing seperate so it's easier to see actual changes.
Diffstat (limited to 'jb-ui/src/components/ui/dot-pattern.tsx')
-rw-r--r--jb-ui/src/components/ui/dot-pattern.tsx60
1 files changed, 30 insertions, 30 deletions
diff --git a/jb-ui/src/components/ui/dot-pattern.tsx b/jb-ui/src/components/ui/dot-pattern.tsx
index 9522b7f..a217a9b 100644
--- a/jb-ui/src/components/ui/dot-pattern.tsx
+++ b/jb-ui/src/components/ui/dot-pattern.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useId, useRef, useState } from "react"
-import { motion } from "motion/react"
+import React, { useEffect, useId, useRef, useState } from "react";
+import { motion } from "motion/react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
/**
* DotPattern Component Props
@@ -17,16 +17,16 @@ import { cn } from "@/lib/utils"
* @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
*/
interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
- width?: number
- height?: number
- x?: number
- y?: number
- cx?: number
- cy?: number
- cr?: number
- className?: string
- glow?: boolean
- [key: string]: unknown
+ width?: number;
+ height?: number;
+ x?: number;
+ y?: number;
+ cx?: number;
+ cy?: number;
+ cr?: number;
+ className?: string;
+ glow?: boolean;
+ [key: string]: unknown;
}
/**
@@ -71,22 +71,22 @@ export function DotPattern({
glow = false,
...props
}: DotPatternProps) {
- const id = useId()
- const containerRef = useRef<SVGSVGElement>(null)
- const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+ const id = useId();
+ const containerRef = useRef<SVGSVGElement>(null);
+ const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
const updateDimensions = () => {
if (containerRef.current) {
- const { width, height } = containerRef.current.getBoundingClientRect()
- setDimensions({ width, height })
+ const { width, height } = containerRef.current.getBoundingClientRect();
+ setDimensions({ width, height });
}
- }
+ };
- updateDimensions()
- window.addEventListener("resize", updateDimensions)
- return () => window.removeEventListener("resize", updateDimensions)
- }, [])
+ updateDimensions();
+ window.addEventListener("resize", updateDimensions);
+ return () => window.removeEventListener("resize", updateDimensions);
+ }, []);
const dots = Array.from(
{
@@ -95,16 +95,16 @@ export function DotPattern({
Math.ceil(dimensions.height / height),
},
(_, i) => {
- const col = i % Math.ceil(dimensions.width / width)
- const row = Math.floor(i / Math.ceil(dimensions.width / width))
+ const col = i % Math.ceil(dimensions.width / width);
+ const row = Math.floor(i / Math.ceil(dimensions.width / width));
return {
x: col * width + cx,
y: row * height + cy,
delay: Math.random() * 5,
duration: Math.random() * 3 + 2,
- }
- }
- )
+ };
+ },
+ );
return (
<svg
@@ -112,7 +112,7 @@ export function DotPattern({
aria-hidden="true"
className={cn(
"pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80",
- className
+ className,
)}
{...props}
>
@@ -152,5 +152,5 @@ export function DotPattern({
/>
))}
</svg>
- )
+ );
}