67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { LiquidGlass } from '@/registry/components/liquid-glass';
|
|
import { GlassesIcon } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
|
|
export default function LiquidGlassDemo() {
|
|
return (
|
|
<div className="absolute inset-0">
|
|
<div className="relative h-full w-full overflow-hidden rounded-xl">
|
|
<div className="overflow-y-auto h-full">
|
|
<LiquidGlass
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer"
|
|
radius={10}
|
|
blur={1}
|
|
childClassName="flex items-center gap-2 text-white font-medium px-3"
|
|
as={motion.button}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
}}
|
|
whileTap={{
|
|
scale: 0.95,
|
|
}}
|
|
>
|
|
<GlassesIcon className="size-5" />
|
|
<span>Liquid Glass</span>
|
|
</LiquidGlass>
|
|
<div
|
|
className="size-full dark:bg-neutral-900 bg-neutral-100"
|
|
style={{
|
|
backgroundImage:
|
|
'url(https://upload.wikimedia.org/wikipedia/commons/9/93/Rainbow_on_Rara_Lake.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
<div
|
|
className="size-full dark:bg-neutral-950 bg-white"
|
|
style={{
|
|
backgroundImage:
|
|
'url(https://www.terdav.com/Content/img/mag/vignettes/grande/1515.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
<div
|
|
className="size-full dark:bg-neutral-900 bg-neutral-100"
|
|
style={{
|
|
backgroundImage:
|
|
'url(https://www.amplitudes.com/blog/wp-content/uploads/2019/07/iStock-1014791492-1.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
<div
|
|
className="size-full dark:bg-neutral-950 bg-white"
|
|
style={{
|
|
backgroundImage:
|
|
'url(https://m.media-amazon.com/images/I/714N8vbkr6L._AC_UF1000,1000_QL80_.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|