expandable-screen

1"use client"
2 
3import {
4  createContext,
5  useContext,
6  useEffect,
7  useState,
8  type ReactNode,
9} from "react"
10import { X } from "lucide-react"
11import { AnimatePresence, motion } from "motion/react"
12 
13// Context
14interface ExpandableScreenContextValue {
15  isExpanded: boolean
16  expand: () => void
17  collapse: () => void
18  layoutId: string
19  triggerRadius: string
20  contentRadius: string
21  animationDuration: number
22}
23 
24const ExpandableScreenContext =
25  createContext<ExpandableScreenContextValue | null>(null)
26 
27function useExpandableScreen() {
28  const context = useContext(ExpandableScreenContext)
29  if (!context) {
30    throw new Error(
31      "useExpandableScreen must be used within an ExpandableScreen"
32    )
33  }
34  return context
35}
36 
37// Root Component
38interface ExpandableScreenProps {
39  children: ReactNode
40  defaultExpanded?: boolean
41  onExpandChange?: (expanded: boolean) => void
42  layoutId?: string
43  triggerRadius?: string
44  contentRadius?: string
45  animationDuration?: number
46  lockScroll?: boolean
47}
48 
49export function ExpandableScreen({
50  children,
51  defaultExpanded = false,
52  onExpandChange,
53  layoutId = "expandable-card",
54  triggerRadius = "100px",
55  contentRadius = "24px",
56  animationDuration = 0.3,
57  lockScroll = true,
58}: ExpandableScreenProps) {
59  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
60 
61  const expand = () => {
62    setIsExpanded(true)
63    onExpandChange?.(true)
64  }
65 
66  const collapse = () => {
67    setIsExpanded(false)
68    onExpandChange?.(false)
69  }
70 
71  useEffect(() => {
72    if (lockScroll) {
73      if (isExpanded) {
74        document.body.style.overflow = "hidden"
75      } else {
76        document.body.style.overflow = "unset"
77      }
78    }
79  }, [isExpanded, lockScroll])
80 
81  return (
82    <ExpandableScreenContext.Provider
83      value={{
84        isExpanded,
85        expand,
86        collapse,
87        layoutId,
88        triggerRadius,
89        contentRadius,
90        animationDuration,
91      }}
92    >
93      {children}
94    </ExpandableScreenContext.Provider>
95  )
96}
97 
98// Trigger Component
99interface ExpandableScreenTriggerProps {
100  children: ReactNode
101  className?: string
102}
103 
104export function ExpandableScreenTrigger({
105  children,
106  className = "",
107}: ExpandableScreenTriggerProps) {
108  const { isExpanded, expand, layoutId, triggerRadius } = useExpandableScreen()
109 
110  return (
111    <AnimatePresence initial={false}>
112      {!isExpanded && (
113        <motion.div className={`inline-block relative ${className}`}>
114// … truncated