"use client" import React, { useState } from "react" import { Battery, Bluetooth, Calendar, Clock, Cloud, Droplets, Fingerprint, MapPin, MessageSquare, Mic, ShoppingCart, Star, Sun, Users, Video, Wind, } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { toast } from "sonner" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { Expandable, ExpandableCard, ExpandableCardContent, ExpandableCardFooter, ExpandableCardHeader, ExpandableContent, ExpandableTrigger, } from "@/components/ui/expandable" // _____________________EXAMPLES______________________ function DesignSyncExample() { return ( console.log("Expanding meeting card...")} onExpandEnd={() => console.log("Meeting card expanded!")} > {({ isExpanded }) => (

In 15 mins

Design Sync

Add to Calendar

1:30PM → 2:30PM

Conference Room A

Weekly design sync to discuss ongoing projects, share updates, and address any design-related challenges.

Attendees:

{["Alice", "Bob", "Charlie", "David"].map((name, index) => ( {name[0]}

{name}

))}

{isExpanded && ( )}

Weekly Next: Mon, 10:00 AM

)} ) } export function ProductShowcaseCard() { return ( console.log("Expanding product card...")} onExpandEnd={() => console.log("Product card expanded!")} > {({ isExpanded }) => (

New Arrival $129.99

Sony Headphones

{[1, 2, 3, 4, 5].map((star) => ( ))} {isExpanded ? ( (128 reviews) ) : ( (128) )}

Experience crystal-clear audio with our latest noise-cancelling technology. Perfect for work, travel, or relaxation.

{[ { icon: Battery, text: "30-hour battery life" }, { icon: Bluetooth, text: "Bluetooth 5.0" }, { icon: Fingerprint, text: "Touch controls" }, { icon: Mic, text: "Voice assistant compatible" }, ].map((feature, index) => (

{feature.text}

))}

Free shipping 30-day return policy

)} ) } export function WeatherForecastCard() { return (

Today's Weather

72°F

Feels like 75°F

Sunny

High 78° / Low 65°

Humidity

45%

Wind

8 mph

Precipitation

5-Day Forecast

{["Mon", "Tue", "Wed", "Thu", "Fri"].map((day, index) => (

{day}

{70 + index}°F

))}

Last updated: 5 minutes ago

) } function ControlledExpandableCard() { const [isExpanded, setIsExpanded] = useState(false) const handleToggle = () => { setIsExpanded((prev) => !prev) } return (

toast.info("Expanding controlled card...")} onExpandEnd={() => toast.info("Controlled card expanded!")} >

Controlled Expandable Card

{isExpanded ? "Expanded" : "Collapsed"}

This card's expanded state is controlled externally.

This content fades in when expanded.

It uses staggered animation for child elements.

The expansion is controlled by the button above.

Footer content slides up when expanded

) } export function ExpandableCardExamples() { return (

{/*

*/} {/*

Controlled Expandable

*/}

) }