"use client" import React from "react" import { Image as ImageIcon, Paintbrush, Plus, X } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { FloatingPanelBody, FloatingPanelButton, FloatingPanelCloseButton, FloatingPanelContent, FloatingPanelFooter, FloatingPanelForm, FloatingPanelHeader, FloatingPanelLabel, FloatingPanelRoot, FloatingPanelSubmitButton, FloatingPanelTextarea, FloatingPanelTrigger, } from "../ui/floating-panel" function FloatingPanelInput() { const handleSubmit = (note: string) => { console.log("Submitted note:", note) } return ( Add Note Note ) } const ColorPickerFloatingPanel = () => { const colors = [ "#FF5733", "#33FF57", "#3357FF", "#FF33F1", "#33FFF1", "#F1FF33", ] return ( Choose Color

{colors.map((color) => ( console.log(`Selected color: ${color}`)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.2 }} /> ))}

) } const QuickActionsFloatingPanel = () => { const actions = [ { icon: , label: "New File", action: () => console.log("New File"), }, { icon: , label: "Upload Image", action: () => console.log("Upload Image"), }, { icon: , label: "Edit Colors", action: () => console.log("Edit Colors"), }, ] return ( Quick Actions {actions.map((action, index) => ( {action.icon} {action.label} ))} ) } const ImagePreviewFloatingPanel = () => { return ( Preview Image Image preview description goes here. console.log("Download clicked")} className="px-3 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors" > Download ) } export function FloatingPanelExamples() { return (

FloatingPanel Examples

) }

floating-panel

Source Code