beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop'

Browse source
This commit is contained in:
molvqingtai 2024-09-30 21:50:08 +08:00
commit 13fc98c66d
1 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/magicui/meteors.tsx → src/components/magicui/Meteors.tsx
View file

@ -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 { interface MeteorsProps {
number?: number; number?: number
} }
export const Meteors = ({ number = 20 }: MeteorsProps) => { export const Meteors = ({ number = 20 }: MeteorsProps) => {
const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>( const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>([])
[],
);
useEffect(() => { useEffect(() => {
const styles = [...new Array(number)].map(() => ({ const styles = [...new Array(number)].map(() => ({
top: -5, top: -5,
left: Math.floor(Math.random() * window.innerWidth) + "px", left: Math.floor(Math.random() * window.innerWidth) + 'px',
animationDelay: Math.random() * 1 + 0.2 + "s", animationDelay: Math.random() * 1 + 0.2 + 's',
animationDuration: Math.floor(Math.random() * 8 + 2) + "s", animationDuration: Math.floor(Math.random() * 8 + 2) + 's'
})); }))
setMeteorStyles(styles); setMeteorStyles(styles)
}, [number]); }, [number])
return ( return (
<> <>
@ -29,7 +27,7 @@ export const Meteors = ({ number = 20 }: MeteorsProps) => {
<span <span
key={idx} key={idx}
className={cn( className={cn(
"pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]", 'pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]'
)} )}
style={style} style={style}
> >
@ -38,7 +36,7 @@ export const Meteors = ({ number = 20 }: MeteorsProps) => {
</span> </span>
))} ))}
</> </>
); )
}; }
export default Meteors; export default Meteors