52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import Image from "next/image";
|
|
import clanLight from "../../public/clan-dark.png";
|
|
import clanDark from "../../public/clan-dark.png";
|
|
import { useAppState } from "./hooks/useAppContext";
|
|
|
|
export default function Background() {
|
|
const { data, isLoading } = useAppState();
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
"fixed -z-10 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
|
|
}
|
|
>
|
|
{(isLoading || !data.isJoined) && (
|
|
<>
|
|
<Image
|
|
className="dark:hidden"
|
|
alt="clan"
|
|
src={clanLight}
|
|
placeholder="blur"
|
|
quality={100}
|
|
fill
|
|
sizes="100vw"
|
|
style={{
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
<Image
|
|
className="hidden dark:block"
|
|
alt="clan"
|
|
src={clanDark}
|
|
placeholder="blur"
|
|
quality={100}
|
|
fill
|
|
sizes="100vw"
|
|
style={{
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// position: fixed;
|
|
// height: 100vh;
|
|
// width: 100vw;
|
|
// overflow: hidden;
|
|
// z-index: -1;
|