diff --git a/components/LoadingScreen.tsx b/components/LoadingScreen.tsx new file mode 100644 index 0000000..cc38ba2 --- /dev/null +++ b/components/LoadingScreen.tsx @@ -0,0 +1,26 @@ +import styles from 'styles/LoadingScreen.module.sass' +import { useTheme } from 'next-themes' +import Image from 'next/image' + +const LoadingScreen = ({ + isLoading, + className, +}: { + isLoading: boolean + className?: string +}) => { + const { resolvedTheme: theme } = useTheme() + + if (isLoading) + return ( +
+
+ + + +
+
+ ) +} + +export default LoadingScreen diff --git a/pages/_app.tsx b/pages/_app.tsx index d988541..d39ba45 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,15 +1,20 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { ThemeProvider } from "next-themes"; -// import { AppProps } from 'next/app' -// import 'tailwindcss/tailwind.css' import "../styles/main.sass"; +import LoadingScreen from "components/LoadingScreen"; function MyApp({ Component, pageProps }) { + const [loading, setLoading] = useState(true) + useEffect(() => setLoading(false), []) + return ( + + + ); } diff --git a/public/ValorantSymbol.svg b/public/ValorantSymbol.svg new file mode 100644 index 0000000..3b1c4b9 --- /dev/null +++ b/public/ValorantSymbol.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons.svg b/public/icons.svg index 0a21649..0dfa8e7 100644 --- a/public/icons.svg +++ b/public/icons.svg @@ -1,44 +1,204 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/LoadingScreen.module.sass b/styles/LoadingScreen.module.sass new file mode 100644 index 0000000..d5f9484 --- /dev/null +++ b/styles/LoadingScreen.module.sass @@ -0,0 +1,33 @@ +@import "./_variables" + +.cover + position: fixed + padding: 0 + margin: 0 + top: 0 + left: 0 + width: 100% + height: 100% + opacity: 100% + z-index: 42069 + background: $background-dark + color: $text-dark + &[data-theme="light"] + background: $background-light + color: $text-light + +.center + + width: 100% + height: 100% + scale: 50% + // animation: load 5s infinite ease + +// .svg +// scale: 10% + +@keyframes load + 0% + rotate: 0deg + 100% + rotate: 180deg