93:I[903690,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 95:T1797,[V0_FILE]typescriptreact:file="components/kokonutui/toolbar.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Filter, Settings, Download, Share2, type LucideIcon, User, Bell, Sun, Edit2, Lock } from "lucide-react" interface ToolbarItem { id: string title: string icon: LucideIcon type?: never } interface ToolbarProps { className?: string activeColor?: string onSearch?: (value: string) => void } const buttonVariants = { initial: { gap: 0, paddingLeft: ".5rem", paddingRight: ".5rem", }, animate: (isSelected: boolean) => ({ gap: isSelected ? ".5rem" : 0, paddingLeft: isSelected ? "1rem" : ".5rem", paddingRight: isSelected ? "1rem" : ".5rem", }), } const spanVariants = { initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 }, } const notificationVariants = { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: -10 }, exit: { opacity: 0, y: -20 }, } const lineVariants = { initial: { scaleX: 0, x: "-50%" }, animate: { scaleX: 1, x: "0%", transition: { duration: 0.2, ease: "easeOut" }, }, exit: { scaleX: 0, x: "50%", transition: { duration: 0.2, ease: "easeIn" }, }, } const transition = { type: "spring", bounce: 0, duration: 0.4 } export function Toolbar({ className, activeColor = "text-primary", onSearch }: ToolbarProps) { const [selected, setSelected] = React.useState("filter") const [isToggled, setIsToggled] = React.useState(false) const [activeNotification, setActiveNotification] = React.useState(null) const outsideClickRef = React.useRef(null) const toolbarItems: ToolbarItem[] = [ { id: "filter", title: "Filter", icon: Filter }, { id: "settings", title: "Settings", icon: Settings }, { id: "download", title: "Download", icon: Download }, { id: "share", title: "Share", icon: Share2 }, { id: "notifications", title: "Notifications", icon: Bell }, { id: "profile", title: "Profile", icon: User }, { id: "theme", title: "Theme", icon: Sun }, ] const handleItemClick = (itemId: string) => { setSelected(selected === itemId ? null : itemId) setActiveNotification(itemId) setTimeout(() => setActiveNotification(null), 1500) } return (

{activeNotification && (

{toolbarItems.find((item) => item.id === activeNotification)?.title} clicked!

)}

{toolbarItems.map((item) => ( handleItemClick(item.id)} transition={transition} className={cn( "relative flex items-center rounded-none px-3 py-2", "text-sm font-medium transition-colors duration-300", selected === item.id ? "bg-[#1F9CFE] text-white rounded-lg" : "text-muted-foreground hover:bg-muted hover:text-foreground", )} > {selected === item.id && ( {item.title} )} ))} setIsToggled(!isToggled)} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-xl border border-primary/30 shadow-sm transition-all duration-200 hover:shadow-md hover:bg-primary/90 hover:border-primary/40 active:border-primary/50" > {isToggled ? : } {isToggled ? "On" : "Off"}

) } export default Toolbar 89:["$","$L93",null,{"chatId":"HnZL9QTSHx2","children":["$","$L94",null,{"data":{"@\"active-block\",\"HnZL9QTSHx2\",":{"id":"b_pALkVXikhBX","messageId":"qSRvxCCJO7etDG0ryJfErnb45D0FJec9","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"HnZL9QTSHx2\",":false},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This