svrjs-nextjs-website/components/ui/animated-gradient-text.tsx

26 lines
1,006 B
TypeScript
Raw Normal View History

2024-06-15 14:55:33 +02:00
import { cn } from "@/lib/utils";
import { ReactNode } from "react";
export default function AnimatedGradientText({
children,
className
2024-06-15 14:55:33 +02:00
}: {
children: ReactNode;
className?: string;
}) {
return (
<div
className={cn(
"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
className
2024-06-15 14:55:33 +02:00
)}
>
<div
className={`direction-reverse absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#26751a] to-[#154300] dark:bg-gradient-to-r dark:from-[#aafc9e]/80 dark:to-[#97fd67]/30 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
/>
{children}
</div>
);
}