From bc860f17173f3912b752b79e3e09572506e5be26 Mon Sep 17 00:00:00 2001 From: Ivan Kirilov Dimitrov Date: Wed, 31 Jul 2024 18:58:36 +0200 Subject: [PATCH] some stars --- src/app/globals.css | 5 +++++ src/app/layout.tsx | 2 +- src/components/stars.tsx | 42 ++++++++++++++++++++++++++++++++++++++-- 3 files changed, 46 insertions(+), 3 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index be17bf1..1ca0f56 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -26,6 +26,11 @@ main { @apply flex flex-col w-full h-full bg-slate-950/95; } +main div, +svg { + @apply z-20; +} + svg { @apply transition duration-200 ease-in; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3d33587..5226192 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - +
{children} diff --git a/src/components/stars.tsx b/src/components/stars.tsx index a732bb3..119017f 100644 --- a/src/components/stars.tsx +++ b/src/components/stars.tsx @@ -1,5 +1,43 @@ -const Stars = () => { - return
heheee
; +"use client"; + +import { useEffect, useState } from "react"; + +type Props = { + count: number; +}; +const Stars = ({ count }: Props) => { + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); + + useEffect(() => { + setWidth(window.innerWidth); + setHeight(window.innerHeight); + }, []); + + const randomRgba = (alpha: number) => { + return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})` + } + + return ( +
+ {Array.from({ length: count }).map((_it, i) => { + const radius = `${Math.random() * 7}px` + return ( +
+
+ ) + })} +
+ ); }; export default Stars;