44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
|
|
|
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface FilePickerProps {
|
|
label?: string;
|
|
description?: string;
|
|
accept?: string;
|
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function FilePicker({ label, description, accept, onChange, disabled }: FilePickerProps) {
|
|
return (
|
|
<Stack gap={2}>
|
|
{label && (
|
|
<Text as="label" size="sm" weight="medium" color="text-gray-400">
|
|
{label}
|
|
</Text>
|
|
)}
|
|
{description && (
|
|
<Text size="xs" color="text-gray-500">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
<Box
|
|
as="input"
|
|
type="file"
|
|
accept={accept}
|
|
onChange={onChange}
|
|
disabled={disabled}
|
|
display="block"
|
|
fullWidth
|
|
size="sm"
|
|
color="text-gray-400"
|
|
className="file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-blue file:text-white file:cursor-pointer file:transition-colors hover:file:bg-primary-blue/80 disabled:file:opacity-50 disabled:file:cursor-not-allowed"
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|