47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { useLang } from '@/hooks/use-lang';
|
|
import { useState } from 'react';
|
|
import IconPicker from './icon-picker';
|
|
import { Input } from './ui/input';
|
|
import { ScrollArea } from './ui/scroll-area';
|
|
import { TooltipProvider } from './ui/tooltip';
|
|
|
|
interface IconPickerDialogProps {
|
|
name: string;
|
|
value: string;
|
|
placeholder?: string;
|
|
onSelect: (icon: string) => void;
|
|
}
|
|
|
|
const IconPickerDialog = ({ onSelect, value, name, placeholder }: IconPickerDialogProps) => {
|
|
const [openIcon, setOpenIcon] = useState(false);
|
|
const { dashboard } = useLang();
|
|
|
|
return (
|
|
<>
|
|
<Input required readOnly type="text" name={name} value={value} placeholder={placeholder || name} onClick={() => setOpenIcon(true)} />
|
|
|
|
<TooltipProvider delayDuration={0}>
|
|
<Dialog open={openIcon} onOpenChange={setOpenIcon}>
|
|
<DialogContent className="p-0">
|
|
<ScrollArea className="max-h-[90vh] p-6">
|
|
<DialogHeader className="mb-6">
|
|
<DialogTitle>{dashboard.icon_picker}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<IconPicker
|
|
onSelect={(icon) => {
|
|
onSelect(icon);
|
|
setOpenIcon(false);
|
|
}}
|
|
/>
|
|
</ScrollArea>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</TooltipProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default IconPickerDialog;
|