All files / components/chat attach-menu.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
2x
2x
2x
 
 
 
 
 
35x
35x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
 
import { PlusIcon } from "@/components/icons/Plus";
import { PaperclipIcon } from "@/components/icons/Paperclip";
import { useAttachMenu } from "@/hooks/use-attach-menu";
 
type AttachMenuProps = {
  onFileSelect: (file: File) => void;
};
 
export function AttachMenu({ onFileSelect }: AttachMenuProps) {
  const { open, menuRef, fileInputRef, handleToggle, handleAddFiles, handleFileChange } = useAttachMenu({ onFileSelect });
 
  return (
    <div ref={menuRef} className="relative">
      <input
        ref={fileInputRef}
        type="file"
        accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp3,.mp4"
        className="hidden"
        onChange={handleFileChange}
      />
 
      <button
        type="button"
        aria-label="Attach file"
        onClick={handleToggle}
        className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-white/25 text-white/50 transition cursor-pointer hover:border-violet-400/70 hover:bg-violet-400/10 hover:text-violet-300 light:border-slate-300 light:text-slate-500 light:hover:border-violet-400 light:hover:bg-violet-50 light:hover:text-violet-600"
      >
        <PlusIcon className="size-4" />
      </button>
 
      {open && (
        <div className="absolute bottom-full left-0 mb-2 w-52 overflow-hidden rounded-xl border border-white/10 bg-modal-bg py-1 shadow-navy-xl light:border-slate-200 light:bg-white">
          <button
            type="button"
            onClick={handleAddFiles}
            className="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-sm text-white/85 transition hover:bg-white/6 light:text-slate-800 light:hover:bg-slate-50"
          >
            <PaperclipIcon className="size-4 shrink-0 text-white/50 light:text-slate-400" />
            Add files
          </button>
        </div>
      )}
    </div>
  );
}