Animated Drawer

1'use client';
2 
3import { useState, useMemo } from 'react';
4import { Drawer } from 'vaul';
5import useMeasure from 'react-use-measure';
6import { motion } from 'motion/react';
7import { Button } from '@/components/ui/button';
8import { X } from 'lucide-react';
9import {
10  BannedIcon,
11  DangerIcon,
12  FaceIDIcon,
13  LockIcon,
14  PassIcon,
15  PhraseIcon,
16  RecoveryPhraseIcon,
17  ShieldIcon,
18  WarningIcon,
19} from '@/components/demo';
20export const AnimatedDrawer = () => {
21  const [isOpen, setIsOpen] = useState<boolean>(false);
22  const [view, setView] = useState('default');
23  const [elementRef, bounds] = useMeasure();
24 
25  const content = useMemo(() => {
26    switch (view) {
27      case 'default':
28        return (
29          <div className="">
30            <div className="flex items-center justify-between w-full">
31              <h2 className="text-lg font-medium text-neutral-900 dark:text-neutral-100">Wallet Settings</h2>
32              <Button
33                variant="secondary"
34                size="icon"
35                className="rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800"
36                onClick={() => setIsOpen(false)}
37              >
38                <X className="text-neutral-600 dark:text-neutral-400" size="18" />
39              </Button>
40            </div>
41 
42            <div className="mt-6 flex flex-col items-start gap-4">
43              <button
44                onClick={() => setView('key')}
45                className="bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors"
46              >
47                <LockIcon />
48                View Private Key
49              </button>
50              <button
51                onClick={() => setView('pharse')}
52                className="bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors"
53              >
54                <PassIcon />
55                View Recovery Phrase
56              </button>
57              <button
58                onClick={() => setView('remove')}
59                className="bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors"
60              >
61                <WarningIcon />
62// … truncated