UI & API Menu Inovasi, SubMenu Program Kreatif Desa

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIconEdit.tsx

@@ -0,0 +1,70 @@
+'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>
+  );
+}
+