49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
type DiagonalVariant = "primary" | "secondary";
|
|
|
|
interface CircleGradientBackgroundProps {
|
|
className?: string;
|
|
diagonal?: DiagonalVariant;
|
|
}
|
|
|
|
const CircleGradientBackground = ({
|
|
className = "",
|
|
diagonal = "primary",
|
|
}: CircleGradientBackgroundProps) => {
|
|
const isPrimary = diagonal === "primary";
|
|
|
|
return (
|
|
<div
|
|
className={cls("fixed top-0 left-0 right-0 bottom-0 h-screen w-full -z-10 overflow-hidden", className)}
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className={cls(
|
|
"fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
|
|
isPrimary ? "top-0 right-0 translate-x-1/2 -translate-y-1/2" : "top-0 left-0 -translate-x-1/2 -translate-y-1/2"
|
|
)}
|
|
style={{
|
|
background: `radial-gradient(circle at center, var(--color-background-accent) 0%, transparent 70%)`,
|
|
}}
|
|
/>
|
|
<div
|
|
className={cls(
|
|
"fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
|
|
isPrimary ? "bottom-0 left-0 -translate-x-1/2 translate-y-1/2" : "bottom-0 right-0 translate-x-1/2 translate-y-1/2"
|
|
)}
|
|
style={{
|
|
background: `radial-gradient(circle at center, var(--color-background-accent) 0%, transparent 70%)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
CircleGradientBackground.displayName = "CircleGradientBackground";
|
|
|
|
export default memo(CircleGradientBackground);
|