Toolbar Dynamic

1'use client';
2import React, { useRef, useState } from 'react';
3import { motion, MotionConfig } from 'motion/react';
4import useClickOutside from '@/hooks/useClickOutside';
5import { ArrowLeft, Search, User } from 'lucide-react';
6 
7const transition = {
8  type: 'spring',
9  bounce: 0.1,
10  duration: 0.2,
11};
12 
13function Button({
14  children,
15  onClick,
16  disabled,
17  ariaLabel,
18}: {
19  children: React.ReactNode;
20  onClick?: () => void;
21  disabled?: boolean;
22  ariaLabel?: string;
23}) {
24  return (
25    <button
26      className='relative flex h-9 w-9 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50'
27      type='button'
28      onClick={onClick}
29      disabled={disabled}
30      aria-label={ariaLabel}
31    >
32      {children}
33    </button>
34  );
35}
36 
37export default function ToolbarDynamic() {
38  const [isOpen, setIsOpen] = useState(false);
39  const containerRef = useRef<HTMLDivElement>(null);
40 
41  useClickOutside(containerRef, () => {
42    setIsOpen(false);
43  });
44 
45  return (
46    <MotionConfig transition={transition}>
47      <div className='absolute bottom-8' ref={containerRef}>
48        <div className='h-full w-full rounded-xl border border-zinc-950/10 bg-white'>
49          <motion.div
50            animate={{
51              // @todo: here I want to remove the width
52              width: isOpen ? '300px' : '98px',
53            }}
54            initial={false}
55          >
56            <div className='overflow-hidden p-2'>
57              {!isOpen ? (
58                <div className='flex space-x-2'>
59                  <Button disabled ariaLabel='User profile'>
60                    <User className='h-5 w-5' />
61                  </Button>
62                  <Button
63                    onClick={() => setIsOpen(true)}
64                    ariaLabel='Search notes'
65                  >
66                    <Search className='h-5 w-5' />
67                  </Button>
68                </div>
69              ) : (
70                <div className='flex space-x-2'>
71                  <Button onClick={() => setIsOpen(false)} ariaLabel='Back'>
72                    <ArrowLeft className='h-5 w-5' />
73                  </Button>
74                  <div className='relative w-full'>
75                    <input
76// … truncated