111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { Box, rem, Select } from '@mantine/core';
|
|
import {
|
|
IconAmbulance,
|
|
IconCash,
|
|
IconChartLine,
|
|
IconChristmasTreeFilled,
|
|
IconClipboardTextFilled,
|
|
IconDroplet,
|
|
IconFiretruck,
|
|
IconHome,
|
|
IconHomeEco,
|
|
IconHospital,
|
|
IconLeaf,
|
|
IconRecycle,
|
|
IconScale,
|
|
IconSchool,
|
|
IconShieldFilled,
|
|
IconShoppingCart,
|
|
IconTent,
|
|
IconTrashFilled,
|
|
IconTree,
|
|
IconTrendingUp,
|
|
IconTrophy,
|
|
IconTruckFilled,
|
|
IconBuilding,
|
|
IconAlertTriangle
|
|
} from '@tabler/icons-react';
|
|
|
|
const iconMap = {
|
|
ekowisata: { label: 'Ekowisata', icon: IconLeaf },
|
|
kompetisi: { label: 'Kompetisi', icon: IconTrophy },
|
|
wisata: { label: 'Wisata', icon: IconTent },
|
|
ekonomi: { label: 'Ekonomi', icon: IconChartLine },
|
|
sampah: { label: 'Sampah', icon: IconRecycle },
|
|
truck: { label: 'Truck', icon: IconTruckFilled },
|
|
scale: { label: 'Scale', icon: IconScale },
|
|
clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
|
|
trash: { label: 'Trash', icon: IconTrashFilled },
|
|
lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
|
|
sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
|
|
ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
|
|
mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
|
|
rumah: {label: 'Rumah', icon: IconHome},
|
|
pohon: {label: 'Pohon', icon: IconTree},
|
|
air: {label: 'Air', icon: IconDroplet},
|
|
bantuan: {label: 'Bantuan', icon: IconCash},
|
|
pelatihan: {label: 'Pelatihan', icon: IconSchool},
|
|
subsidi: {label: 'Subsidi', icon: IconShoppingCart},
|
|
layananKesehatan: {label: 'Layanan Kesehatan', icon: IconHospital},
|
|
polisi: {label: 'Polisi', icon: IconShieldFilled},
|
|
ambulans: {label: 'Ambulans', icon: IconAmbulance},
|
|
pemadam: {label: 'Pemadam', icon: IconFiretruck},
|
|
rumahSakit: {label: 'Rumah Sakit', icon: IconHospital},
|
|
bangunan: {label: 'Bangunan', icon: IconBuilding},
|
|
darurat: {label: 'Darurat', icon: IconAlertTriangle},
|
|
};
|
|
|
|
type IconKey = keyof typeof iconMap;
|
|
|
|
const iconList = Object.entries(iconMap).map(([value, data]) => ({
|
|
value,
|
|
label: data.label,
|
|
}));
|
|
|
|
export default function SelectIconProgramEdit({
|
|
onChange,
|
|
value,
|
|
}: {
|
|
onChange: (value: IconKey) => void;
|
|
value: IconKey;
|
|
}) {
|
|
const IconComponent = iconMap[value]?.icon || null;
|
|
|
|
return (
|
|
<Box maw={300}>
|
|
<Select
|
|
placeholder="Pilih ikon"
|
|
value={value}
|
|
onChange={(value) => {
|
|
if (value) onChange(value as IconKey);
|
|
}}
|
|
data={iconList}
|
|
leftSection={
|
|
IconComponent && (
|
|
<Box>
|
|
<IconComponent size={24} stroke={1.5} />
|
|
</Box>
|
|
)
|
|
}
|
|
withCheckIcon={false}
|
|
searchable={false}
|
|
rightSectionWidth={0}
|
|
styles={{
|
|
input: {
|
|
textAlign: 'left',
|
|
fontSize: rem(16),
|
|
paddingLeft: 40,
|
|
},
|
|
section: {
|
|
left: 10,
|
|
right: 'auto',
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|