Add Fitur Search Di setiap menu

src/app/admin/(dashboard)/_com/header.tsx

@@ -1,22 +1,37 @@
 import React from 'react';
 import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
-import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import { IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 
+type HeaderSearchProps = {
+  title: string;
+  placeholder?: string;
+  searchIcon?: React.ReactNode;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
 
-const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+const HeaderSearch = ({
+  title = "",
+  placeholder = "pencarian",
+  searchIcon = <IconSearch size={20} />,
+  value,
+  onChange,
+}: HeaderSearchProps) => {
   return (
     <Grid>
       <GridCol span={{ base: 12, md: 9 }}>
         <Title order={3}>{title}</Title>
       </GridCol>
       <GridCol span={{ base: 12, md: 3 }}>
-        <Paper radius={"lg"} bg={colors['white-1']}>
+        <Paper radius="lg" bg={colors['white-1']}>
           <TextInput
             radius="lg"
             placeholder={placeholder}
             leftSection={searchIcon}
             w="100%"
+            value={value}
+            onChange={onChange}
           />
         </Paper>
       </GridCol>
@@ -24,4 +39,4 @@ const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <Ico
   );
 };
 
-export default HeaderSearch;
+export default HeaderSearch;