Quiz-PDF/Frontend/components/Utilities/Background.tsx

22 lines
714 B
TypeScript

"use client";
import colors, { hexToRgb } from "@/utils/colors";
import { useTheme } from "next-themes";
import React, { ReactNode } from "react";
const Background = ({ children }: { children: ReactNode }) => {
const { theme } = useTheme();
const backgroundColor = hexToRgb(colors[theme ?? "light"]["base-100"]);
return (
<div
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col"
style={{
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)`,
}}
>
{children}
</div>
);
};
export default Background;