Components
Loading preview...
Here is expandable component
npx shadcn@latest add https://21st.dev/r/cult-ui/expandable// FILE: src/demos/expandable-card-demo.tsx
"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 { motion as framerMotion } from "framer-motion"
import { Component, ExpandableCard, ExpandableCardContent, ExpandableCardFooter, ExpandableCardHeader, ExpandableContent, ExpandableTrigger } from "@/components/ui/expandable"
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"
function DesignSyncExample() {
return (
<Component
expandDirection="both"
expandBehavior="replace"
initialDelay={0.2}
>
{({ isExpanded }) => (
<ExpandableTrigger>
<ExpandableCard
className="w-full relative"
collapsedSize={{ width: 320, height: 240 }}
expandedSize={{ width: 420, height: 480 }}
hoverToExpand={false}
expandDelay={200}
collapseDelay={500}
>
<ExpandableCardHeader>
<div className="flex justify-between items-start w-full">
<div>
<Badge
variant="secondary"
className="bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-100 mb-2"
>
In 15 mins
</Badge>
<h3 className="font-semibold text-xl text-gray-800 dark:text-white">
Design Sync
</h3>
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="outline" className="h-8 w-8">
<Calendar className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to Calendar</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</ExpandableCardHeader>
<ExpandableCardContent>
<div className="flex flex-col items-start justify-between mb-4">
<div className="flex items-center text-sm text-gray-600 dark:text-gray-300">
<Clock className="h-4 w-4 mr-1" />
<span>1:30PM → 2:30PM</span>
</div>
<ExpandableContent preset="blur-md">
<div className="flex items-center text-sm text-gray-600 dark:text-gray-300">
<MapPin className="h-4 w-4 mr-1" />
<span>Conference Room A</span>
</div>
</ExpandableContent>
</div>
<ExpandableContent preset="blur-md" stagger staggerChildren={0.2}>
<p className="text-sm text-gray-700 dark:text-gray-200 mb-4">
Weekly design sync to discuss ongoing projects, share updates,
and address any design-related challenges.
</p>
<div className="mb-4">
<h4 className="font-medium text-sm text-gray-800 dark:text-gray-100 mb-2 flex items-center">
<Users className="h-4 w-4 mr-2" />
Attendees:
</h4>
<div className="flex -space-x-2 overflow-hidden">
{["Alice", "Bob", "Charlie", "David"].map((name, index) => (
<TooltipProvider key={index}>
<Tooltip>
<TooltipTrigger asChild>
<Avatar className="border-2 border-white dark:border-gray-800">
<AvatarImage
src={`/placeholder.svg?height=32&width=32&text=${name[0]}`}
alt={name}
/>
<AvatarFallback>{name[0]}</AvatarFallback>
</Avatar>
</TooltipTrigger>
<TooltipContent>
<p>{name}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
))}
</div>
</div>
<div className="space-y-2">
<Button className="w-full bg-red-600 hover:bg-red-700 text-white">
<Video className="h-4 w-4 mr-2" />
Join Meeting
</Button>
{isExpanded && (
<Button variant="outline" className="w-full">
<MessageSquare className="h-4 w-4 mr-2" />
Open Chat
</Button>
)}
</div>
</ExpandableContent>
</ExpandableCardContent>
<ExpandableContent preset="slide-up">
<ExpandableCardFooter>
<div className="flex items-center justify-between w-full text-sm text-gray-600 dark:text-gray-300">
<span>Weekly</span>
<span>Next: Mon, 10:00 AM</span>
</div>
</ExpandableCardFooter>
</ExpandableContent>
</ExpandableCard>
</ExpandableTrigger>
)}
</Component>
)
}
function ExpandableCardDemo() {
return (
<div className="p-8 w-full max-w-7xl mx-auto space-y-12">
<div className="flex flex-col items-center space-y-24">
<div className="min-h-[480px]">
<DesignSyncExample />
</div>
<div className="flex gap-24 min-h-[600px]">
</div>
</div>
</div>
)
}
export default ExpandableCardDemo