family-button

1"use client"
2 
3import { FC, ReactNode, useState } from "react"
4import { PlusIcon, XIcon } from "lucide-react"
5import { motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9const CONTAINER_SIZE = 200
10 
11interface FamilyButtonProps {
12  children: React.ReactNode
13}
14 
15const FamilyButton: React.FC<FamilyButtonProps> = ({ children }) => {
16  const [isExpanded, setIsExpanded] = useState(false)
17  const toggleExpand = () => setIsExpanded(!isExpanded)
18 
19  return (
20    <div
21      className={cn(
22        "rounded-[24px] border border-black/10  shadow-sm dark:border-yellow-400/20",
23        "bg-gradient-to-b  from-neutral-900 to-black",
24        isExpanded
25          ? "w-[204px] bg-gradient-to-b dark:from-stone-900 dark:to-neutral-900/80"
26          : "dark:from-neutral-900 dark:to-stone-950 bg-gradient-to-b"
27      )}
28    >
29      <div className="rounded-[23px] border   border-black/10 ">
30        <div className="rounded-[22px] border  dark:border-stone-800 border-white/50 ">
31          <div className="rounded-[21px] border    border-neutral-950/20   flex items-center justify-center ">
32            <FamilyButtonContainer
33              isExpanded={isExpanded}
34              toggleExpand={toggleExpand}
35            >
36              {isExpanded ? (
37                <motion.div
38                  initial={{ opacity: 0 }}
39                  animate={{
40                    opacity: 1,
41                    transition: {
42                      delay: 0.3,
43                      duration: 0.4,
44                      ease: "easeOut",
45                    },
46                  }}
47                >
48                  {children}
49                </motion.div>
50              ) : null}
51            </FamilyButtonContainer>
52          </div>
53        </div>
54      </div>
55    </div>
56  )
57}
58 
59// A container that wraps content and handles animations
60interface FamilyButtonContainerProps {
61  isExpanded: boolean
62  toggleExpand: () => void
63  children: ReactNode
64}
65 
66const FamilyButtonContainer: FC<FamilyButtonContainerProps> = ({
67  isExpanded,
68  toggleExpand,
69  children,
70}) => {
71  return (
72    <motion.div
73      className={cn(
74        "relative   border-white/10 border shadow-lg flex flex-col space-y-1  items-center  text-white  cursor-pointer z-10",
75        !isExpanded
76          ? "bg-gradient-to-b from-neutral-900 to-stone-900 dark:from-stone-700 dark:to-neutral-800/80"
77          : ""
78      )}
79      layoutRoot
80      layout
81      initial={{ borderRadius: 21, width: "4rem", height: "4rem" }}
82      animate={
83// … truncated