expandable-demo

1"use client"
2 
3import React, { useState } from "react"
4import {
5  Battery,
6  Bluetooth,
7  Calendar,
8  Clock,
9  Cloud,
10  Droplets,
11  Fingerprint,
12  MapPin,
13  MessageSquare,
14  Mic,
15  ShoppingCart,
16  Star,
17  Sun,
18  Users,
19  Video,
20  Wind,
21} from "lucide-react"
22import { AnimatePresence, motion, useReducedMotion } from "motion/react"
23 
24import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
25import { Badge } from "@/components/ui/badge"
26import { Button } from "@/components/ui/button"
27import {
28  Tooltip,
29  TooltipContent,
30  TooltipProvider,
31  TooltipTrigger,
32} from "@/components/ui/tooltip"
33import {
34  Expandable,
35  ExpandableCard,
36  ExpandableCardContent,
37  ExpandableCardFooter,
38  ExpandableCardHeader,
39  ExpandableContent,
40  ExpandableTrigger,
41} from "@/registry/default/ui/expandable"
42 
43// _____________________EXAMPLES______________________
44function DesignSyncExample() {
45  return (
46    <Expandable
47      expandDirection="both"
48      expandBehavior="replace"
49      initialDelay={0.2}
50      onExpandStart={() => console.log("Expanding meeting card...")}
51      onExpandEnd={() => console.log("Meeting card expanded!")}
52    >
53      {({ isExpanded }) => (
54        <ExpandableTrigger>
55          <ExpandableCard
56            className="w-full relative"
57            collapsedSize={{ width: 320, height: 240 }}
58            expandedSize={{ width: 420, height: 480 }}
59            hoverToExpand={false}
60            expandDelay={200}
61            collapseDelay={500}
62          >
63            <ExpandableCardHeader>
64              <div className="flex justify-between items-start w-full">
65                <div className="flex items-start flex-col">
66                  <Badge
67                    variant="secondary"
68                    className="bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-100 mb-2"
69                  >
70                    In 15 mins
71                  </Badge>
72                  <h3 className="font-semibold text-xl text-gray-800 dark:text-white">
73                    Design Sync
74                  </h3>
75                </div>
76                <TooltipProvider>
77                  <Tooltip>
78                    <TooltipTrigger asChild>
79                      <Button size="icon" variant="outline" className="h-8 w-8">
80                        <Calendar className="h-4 w-4" />
81                      </Button>
82                    </TooltipTrigger>
83                    <TooltipContent>
84                      <p>Add to Calendar</p>
85                    </TooltipContent>
86// … truncated