fastpocket/components/Utilities/Background.jsx

35 lines
719 B
JavaScript

"use client"
import { useTheme } from "next-themes"
import React from "react"
import Image from "next/image"
const Background = ({ children, className }) => {
const { theme } = useTheme()
return (
<div
className={
"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed flex flex-col " +
className
}
>
<Image
src={
theme == "dark"
? "/images/dark-gradient.webp"
: "/images/gradient.webp"
}
alt="background"
layout="fill"
objectFit="cover"
objectPosition="center"
priority
/>
<div className="z-10">{children}</div>
</div>
)
}
export default Background