From ed201936813d9a720b51e6cb40a05267b94e7314 Mon Sep 17 00:00:00 2001 From: Max Nanis Date: Thu, 10 Sep 2026 17:46:41 -0700 Subject: Typescript prettier Committing seperate so it's easier to see actual changes. --- jb-ui/src/components/ui/dot-pattern.tsx | 60 ++++++++++++++++----------------- 1 file changed, 30 insertions(+), 30 deletions(-) (limited to 'jb-ui/src/components/ui/dot-pattern.tsx') 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 { - 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(null) - const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) + const id = useId(); + const containerRef = useRef(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 ( - ) + ); } -- cgit v1.2.3