Expandable Card

1'use client'
2 
3import * as React from 'react'
4import { XIcon } from 'lucide-react'
5import { Dialog as DialogPrimitive } from 'radix-ui'
6import {
7  AnimatePresence,
8  LayoutGroup,
9  motion,
10  useReducedMotion,
11  type Transition,
12} from 'motion/react'
13import { useControllableState } from '@radix-ui/react-use-controllable-state'
14 
15import { Button } from '@/components/ui/button'
16import { cn } from '@/lib/utils'
17 
18type ExpandableCardContextValue = {
19  open: boolean
20  cardLayoutId: string
21  mediaLayoutId: string
22}
23 
24const ExpandableCardContext = React.createContext<ExpandableCardContextValue | null>(null)
25 
26const expandableCardTransition: Transition = {
27  type: 'spring',
28  stiffness: 220,
29  damping: 30,
30  mass: 0.8,
31}
32 
33function useExpandableCard() {
34  const context = React.useContext(ExpandableCardContext)
35 
36  if (!context) {
37    throw new Error('ExpandableCard components must be used within <ExpandableCard>.')
38  }
39 
40  return context
41}
42 
43function ExpandableCard({
44  open: openProp,
45  defaultOpen = false,
46  onOpenChange,
47  children,
48  ...props
49}: React.ComponentProps<typeof DialogPrimitive.Root>) {
50  const layoutGroupId = React.useId()
51  const [open = false, setOpen] = useControllableState({
52    prop: openProp,
53    defaultProp: defaultOpen,
54    onChange: onOpenChange,
55  })
56 
57  return (
58    <ExpandableCardContext.Provider
59      value={{
60        open,
61        cardLayoutId: `${layoutGroupId}-card`,
62        mediaLayoutId: `${layoutGroupId}-media`,
63      }}
64    >
65      <LayoutGroup id={layoutGroupId}>
66        <DialogPrimitive.Root open={open} onOpenChange={setOpen} {...props}>
67          {children}
68        </DialogPrimitive.Root>
69      </LayoutGroup>
70    </ExpandableCardContext.Provider>
71  )
72}
73 
74type ExpandableCardTriggerProps = Omit<React.ComponentProps<typeof motion.button>, 'layoutId'>
75 
76function ExpandableCardTrigger({
77  className,
78  transition = expandableCardTransition,
79  type = 'button',
80  ...props
81}: ExpandableCardTriggerProps) {
82  const context = useExpandableCard()
83  const shouldReduceMotion = useReducedMotion()
84 
85  return (
86    <DialogPrimitive.Trigger asChild>
87      <motion.button
88        data-slot="expandable-card-trigger"
89        data-state={context.open ? 'open' : 'closed'}
90        type={type}
91        layoutId={context.cardLayoutId}
92        transition={shouldReduceMotion ? { duration: 0 } : transition}
93        className={cn(
94// … truncated