Sinkronisasi UI & Admin - Submenu Perpustakaan Digital

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx

@@ -1,12 +1,15 @@
 'use client'
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
-import { useShallowEffect } from '@mantine/hooks';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconChalkboard, IconLayersSubtract, IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function Page() {
+  const [search, setSearch] = useState("")
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
 
   const {
@@ -18,8 +21,8 @@ function Page() {
   } = stateList.findMany
 
   useShallowEffect(() => {
-    load(page, 10)
-  }, [page])
+    load(page, 10, debouncedSearch)
+  }, [page, debouncedSearch])
 
   const filteredData = data || []
 
@@ -43,9 +46,15 @@ function Page() {
       >
         <Group justify="space-between" align="center" mb="md">
           <Group gap="sm">
-            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <IconChalkboard size={28} stroke={1.5} color={colors['blue-button']} />
             <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
           </Group>
+          <TextInput
+            placeholder='pencarian'
+            leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
         </Group>
 
         {filteredData.length === 0 ? (