import { LiquidGlassCard } from "@/components/ui/sidebar-liquid-glass";
import {
Bell,
Search,
BarChart2,
Settings,
Home,
} from 'lucide-react';
export default function DemoOne() {
return <div
className={'p-8 flex w-full py-20 rounded-xl items-center justify-center'}
style={{
background:
'url("https://cdn.21st.dev/assets/mirror/c1/c19d19e48b56279e51e33e24d2719e475e9ac4fe51e7f0345beb532f49229d75.jpg") center / cover no-repeat',
}}
>
<LiquidGlassCard glowIntensity="sm" shadowIntensity="sm" borderRadius="12px" blurIntensity="sm" draggable className='p-4 w-[280px]'>
<nav className='space-y-2 w-full'>
<button
className='w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-white text-gray-800 font-medium transition-colors hover:bg-gray-100'
aria-current='page'
>
<Home className='w-5 h-5' />
<span>Dashboard</span>
</button>
<button
className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'
>
<Search className='w-5 h-5' />
<span>Search</span>
</button>
<button
className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'
>
<BarChart2 className='w-5 h-5' />
<span>Sales Analytics</span>
</button>
<button
className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'
>
<Bell className='w-5 h-5' />
<span>Notification</span>
</button>
<button
className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'
>
<Settings className='w-5 h-5' />
<span>Account Settings</span>
</button>
</nav>
</LiquidGlassCard>
</div>;
}
Part of UI Layouts — browse the full library on 21st.dev.