44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import colors, { hexToRgb } from "@/utils/colors";
|
|
import { useTheme } from "next-themes";
|
|
import React, { ReactNode, useEffect, useState } from "react";
|
|
|
|
const Background = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div
|
|
className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse`}
|
|
></div>
|
|
);
|
|
}
|
|
|
|
const backgroundColor = hexToRgb(colors[theme!]["base-100"]);
|
|
|
|
return (
|
|
<div
|
|
className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed flex flex-col`}
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Background;
|