58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button, cn } from "@common/components";
|
|
|
|
interface FileAddButtonProps {
|
|
inputId: string;
|
|
onFilesSelected: (files: FileList | null) => void;
|
|
accept?: string;
|
|
multiple?: boolean;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
}
|
|
|
|
function FileAddButton({
|
|
inputId,
|
|
onFilesSelected,
|
|
accept,
|
|
multiple = true,
|
|
disabled = false,
|
|
label = "파일추가",
|
|
}: FileAddButtonProps) {
|
|
return (
|
|
<label
|
|
htmlFor={inputId}
|
|
className={cn("block cursor-pointer", disabled && "pointer-events-none")}
|
|
>
|
|
<input
|
|
id={inputId}
|
|
type="file"
|
|
multiple={multiple}
|
|
accept={accept}
|
|
disabled={disabled}
|
|
className="peer sr-only"
|
|
aria-label={label}
|
|
onChange={(event) => {
|
|
onFilesSelected(event.target.files);
|
|
event.target.value = "";
|
|
}}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={disabled}
|
|
className={cn(
|
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
|
|
disabled && "pointer-events-none opacity-50",
|
|
)}
|
|
asChild
|
|
>
|
|
<span>{label}</span>
|
|
</Button>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export { FileAddButton };
|
|
export type { FileAddButtonProps };
|