diff --git a/src/components/magicui/meteors.tsx b/src/components/magicui/Meteors.tsx similarity index 58% rename from src/components/magicui/meteors.tsx rename to src/components/magicui/Meteors.tsx index 4549eb6..5156966 100644 --- a/src/components/magicui/meteors.tsx +++ b/src/components/magicui/Meteors.tsx @@ -1,26 +1,24 @@ -"use client"; +'use client' -import { useEffect, useState } from "react"; +import { useEffect, useState } from 'react' -import { cn } from "@/utils/index"; +import { cn } from '@/utils/index' interface MeteorsProps { - number?: number; + number?: number } export const Meteors = ({ number = 20 }: MeteorsProps) => { - const [meteorStyles, setMeteorStyles] = useState>( - [], - ); + const [meteorStyles, setMeteorStyles] = useState>([]) useEffect(() => { const styles = [...new Array(number)].map(() => ({ top: -5, - left: Math.floor(Math.random() * window.innerWidth) + "px", - animationDelay: Math.random() * 1 + 0.2 + "s", - animationDuration: Math.floor(Math.random() * 8 + 2) + "s", - })); - setMeteorStyles(styles); - }, [number]); + left: Math.floor(Math.random() * window.innerWidth) + 'px', + animationDelay: Math.random() * 1 + 0.2 + 's', + animationDuration: Math.floor(Math.random() * 8 + 2) + 's' + })) + setMeteorStyles(styles) + }, [number]) return ( <> @@ -29,7 +27,7 @@ export const Meteors = ({ number = 20 }: MeteorsProps) => { @@ -38,7 +36,7 @@ export const Meteors = ({ number = 20 }: MeteorsProps) => { ))} - ); -}; + ) +} -export default Meteors; +export default Meteors