71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { Box, rem, Select } from '@mantine/core';
|
|
import {
|
|
IconChartLine,
|
|
IconLeaf,
|
|
IconRecycle,
|
|
IconTent,
|
|
IconTrophy,
|
|
} 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 },
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|
|
|