yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { PaperClipIcon } from "@heroicons/react/24/outline";
2import type { ChangeEventHandler } from "react";
3import { useId } from "react";
4
5interface ChooseFileProps {
6 onChange: ChangeEventHandler<HTMLInputElement>;
7 disabled?: boolean;
8}
9
10const ChooseFile = ({ onChange, disabled }: ChooseFileProps) => {
11 const id = useId();
12
13 return (
14 <div className="flex items-center space-x-2">
15 <label
16 className="flex cursor-pointer items-center space-x-2 rounded-xl border border-gray-300 bg-white px-3 py-1 text-gray-700 shadow-xs outline-offset-4 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
17 htmlFor={id}
18 >
19 <PaperClipIcon className="size-4" />
20 <span>Choose File</span>
21 </label>
22 <input
23 accept=".png, .jpg, .jpeg, .gif"
24 className="hidden"
25 disabled={disabled}
26 id={id}
27 onChange={onChange}
28 onClick={(event) => {
29 (event.target as HTMLInputElement).value = "";
30 }}
31 type="file"
32 />
33 </div>
34 );
35};
36
37export default ChooseFile;