🎨
UI Knihovna
Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.
Výsuvné panely
Panely, které vyjíždějí z okraje obrazovky.
Pravý výsuv
Drawer.tsxLanguage: tsx
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
export function RightDrawer() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)} className="px-5 py-2.5 rounded-xl bg-accent text-background font-semibold">
Open Right Drawer
</button>
<AnimatePresence>
{isOpen && (
<div className="fixed inset-0 z-50 flex justify-end">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setIsOpen(false)}
className="absolute inset-0 bg-background/80 backdrop-blur-sm"
/>
<motion.div
initial={{ x: "100%" }}
animate={{ x: 0 }}
exit={{ x: "100%" }}
transition={{ type: "spring", damping: 25, stiffness: 200 }}
className="relative w-full max-w-sm h-full bg-surface border-l border-border shadow-2xl flex flex-col"
>
<div className="p-6 border-b border-border flex justify-between items-center">
<h3 className="text-xl font-bold text-foreground">Settings</h3>
<button onClick={() => setIsOpen(false)} className="p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/5 text-muted transition-colors">
✕
</button>
</div>
<div className="p-6 flex-1 overflow-y-auto w-full">
<p className="text-muted leading-relaxed">Drawer content goes here. You can scroll if it overflows.</p>
</div>
<div className="p-6 border-t border-border">
<button onClick={() => setIsOpen(false)} className="w-full py-3 bg-accent text-background font-bold rounded-xl active:scale-95 transition-transform">
Save Changes
</button>
</div>
</motion.div>
</div>
)}
</AnimatePresence>
</>
);
}