Family Drawer

1"use client";
2 
3import { useMemo, useRef, useState, type ReactNode } from "react";
4 
5type SetView = (view: string) => void;
6import { Drawer } from "vaul";
7import useMeasure from "react-use-measure";
8import { motion, AnimatePresence } from "motion/react";
9import clsx from "clsx";
10 
11 
12export default function FamilyDrawer() {
13    const [isOpen, setIsOpen] = useState(false);
14    const [view, setView] = useState("default");
15    const [elementRef, bounds] = useMeasure();
16    const previousHeightRef = useRef<number | null>(null);
17 
18    const content = useMemo(() => {
19        switch (view) {
20            case "default":
21                return <DefaultView setView={setView} />;
22            case "remove":
23                return <RemoveWallet setView={setView} />;
24            case "phrase":
25                return <Phrase setView={setView} />;
26            case "key":
27                return <Key setView={setView} />;
28        }
29    }, [view]);
30 
31    const opacityDuration = useMemo(() => {
32        const MIN_DURATION = 0.15;
33        const MAX_DURATION = 0.27;
34 
35        if (!previousHeightRef.current) {
36            previousHeightRef.current = bounds.height;
37            return MIN_DURATION;
38        }
39 
40        const heightDifference = Math.abs(
41            bounds.height - previousHeightRef.current,
42        );
43        previousHeightRef.current = bounds.height;
44 
45        const duration = Math.min(
46            Math.max(heightDifference / 500, MIN_DURATION),
47            MAX_DURATION,
48        );
49 
50        return duration;
51    }, [bounds.height]);
52 
53    return (
54        <>
55            <button
56                className="focus-visible:shadow-focus-ring-button absolute top-1/2 left-1/2 h-[44px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-gray-200 bg-white px-4 py-2 font-medium text-black transition-colors hover:bg-[#F9F9F8] md:font-medium dark:border-none dark:bg-muted dark:shadow-sm dark:text-foreground dark:hover:bg-muted"
57                onClick={() => setIsOpen(true)}
58                style={{ fontFamily: "var(--font-open-runde)" }}
59            >
60                Try it out
61            </button>
62            <Drawer.Root open={isOpen} onOpenChange={setIsOpen}>
63                <Drawer.Portal>
64                    <Drawer.Overlay
65                        className="fixed inset-0 z-[60] bg-black/30 backdrop-blur-xs"
66                        onClick={() => setIsOpen(false)}
67                    />
68                    <Drawer.Content
69                        asChild
70// … truncated