raj.how/src/components/gradient-provider.tsx

74 lines
1.8 KiB
TypeScript
Raw Normal View History

2024-01-09 22:55:25 +05:30
"use client";
2024-01-09 21:25:30 +05:30
import gradient from "@/app/(assets)/gradient.svg";
import symetric_gradient from "@/app/(assets)/symetric-grad.svg";
import background_gradient from "@/app/(assets)/background-gradient.png";
import { cn } from "@/lib/utils";
import Image from "next/image";
2024-01-09 22:55:25 +05:30
import { motion } from "framer-motion";
2024-01-09 21:25:30 +05:30
export function GradientProvider({ children }: { children: React.ReactNode }) {
return (
2024-01-09 22:55:25 +05:30
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="relative w-fit"
>
<div className="absolute rotate-180 -z-[5] w-[600px] h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
2024-01-09 21:25:30 +05:30
<Image src={gradient} alt="gradient" />
</div>
{children}
2024-01-09 22:55:25 +05:30
</motion.div>
2024-01-09 21:25:30 +05:30
);
}
export function SymetricGradProvider({
children,
className,
gradient_class,
}: {
children: React.ReactNode;
className?: string;
gradient_class?: string;
}) {
return (
2024-01-09 22:55:25 +05:30
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className={cn("relative w-fit", className)}
>
2024-01-09 21:25:30 +05:30
<div
className={cn(
"absolute w-full -z-10 h-[800px] opacity-70 top-1/4 rotate-180 -translate-x-1/2 -translate-y-1/2 left-1/2",
gradient_class,
)}
>
<Image src={symetric_gradient} alt="gradient" />
</div>
{children}
2024-01-09 22:55:25 +05:30
</motion.div>
2024-01-09 21:25:30 +05:30
);
}
export function BackgroundGradentProvider({
className,
}: {
className?: string;
}) {
return (
2024-01-09 22:55:25 +05:30
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
2024-01-09 21:25:30 +05:30
className={cn(
"fixed overflow-hidden w-full h-full opacity-50 top-0 left-0",
className,
)}
>
<Image
className="w-full h-full object-cover"
src={background_gradient}
alt="gradient"
/>
2024-01-09 22:55:25 +05:30
</motion.div>
2024-01-09 21:25:30 +05:30
);
}