Perbaikan Banner

src/app/(application)/banner/edit/[id]/page.tsx

@@ -1,10 +1,11 @@
+
 import { EditBanner } from "@/module/banner";
 import { Box } from "@mantine/core";
 
 export default function Page() {
    return (
       <Box>
-         <EditBanner />
+         <EditBanner/>
       </Box>
    );
 }

src/module/banner/lib/api_banner.ts

@@ -21,7 +21,7 @@ export const funCreateBanner = async (data: FormData) => {
     return await response.json().catch(() => null);
 }
 
-export const funGetOneBanner = async (path: string) => {
+export const funGetOneBanner = async (path: string, p0: string) => {
     const response = await fetch(`/api/banner/${path}`)
     return await response.json().catch(() => null);
 }

src/module/banner/lib/type_banner.ts

@@ -0,0 +1,6 @@
+export interface IDataBanner {
+    id: string
+    title: string
+    extension: string
+    image: string
+}[]

src/module/banner/ui/create_banner.tsx

@@ -1,11 +1,13 @@
 'use client'
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import { Box, Button, FileInput, Group, Paper, rem, Text, TextInput } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
-import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, rem, Text, TextInput } from '@mantine/core';
 import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import React from 'react';
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 
 function CreateBanner(props: Partial<DropzoneProps>) {
+  const tema = useHookstate(TEMA)
+  
   return (
     <Box>
       <LayoutNavbarNew back='/banner' title='Tambah Banner' menu={<></>} />
@@ -44,7 +46,7 @@ function CreateBanner(props: Partial<DropzoneProps>) {
                     Upload File
                   </Text>
                   <Text size="sm" c="dimmed" inline mt={7}>
-                 File Tidak Boleh Melebihi 500mb
+                    File Tidak Boleh Melebihi 500mb
                   </Text>
                 </Box>
               </Group>
@@ -53,7 +55,7 @@ function CreateBanner(props: Partial<DropzoneProps>) {
           <Box>
             <TextInput
               mt={10}
-              label={ <Text>Judul Banner</Text>}
+              label={<Text>Judul Banner</Text>}
               placeholder='Judul Banner'
               styles={{
                 input: {
@@ -63,7 +65,16 @@ function CreateBanner(props: Partial<DropzoneProps>) {
               }}
             />
           </Box>
-          <Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
+          <Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(510),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`
+            }}>
+            <Button
+              size='lg'
+              color='white'
+              bg={tema.get().utama} radius={30} fullWidth >Simpan</Button>
+          </Box>
         </Box>
       </Box>
     </Box>

src/module/banner/ui/edit_banner.tsx

@@ -1,11 +1,27 @@
 'use client'
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
-import { Box, Button, FileInput, Group, Paper, rem, Text, TextInput } from '@mantine/core';
+import LayoutModal from '@/module/_global/layout/layout_modal';
-import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Group, Paper, rem, Text, TextInput } from '@mantine/core';
 import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import React from 'react';
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+
+function EditBanner(props: Partial<DropzoneProps> ) {
+  const router = useRouter()
+  const tema = useHookstate(TEMA)
+  const param = useParams<{ id: string, detail: string }>()
+  const [title, setTitle] = useState("")
+  const [openModal, setOpenModal] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [imgForm, setImgForm] = useState<any>()
+  const [touched, setTouched] = useState({
+    title: false,
+  });
+
 
-function EditBanner(props: Partial<DropzoneProps>) {
   return (
     <Box>
       <LayoutNavbarNew back='/banner' title='Edit Banner' menu={<></>} />
@@ -44,7 +60,7 @@ function EditBanner(props: Partial<DropzoneProps>) {
                     Upload File
                   </Text>
                   <Text size="sm" c="dimmed" inline mt={7}>
-                 File Tidak Boleh Melebihi 500mb
+                    File Tidak Boleh Melebihi 500mb
                   </Text>
                 </Box>
               </Group>
@@ -53,17 +69,47 @@ function EditBanner(props: Partial<DropzoneProps>) {
           <Box>
             <TextInput
               mt={10}
-              label={ <Text>Judul Banner</Text>}
+              label="Judul Banner"
-              placeholder='Judul Banner'
+              placeholder='Banner'
               styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
                   borderRadius: 10,
                 },
               }}
+              required
+              size='md'
+              value={title}
+              onChange={(e) => {
+                setTitle(e.currentTarget.value)
+                setTouched({...touched, title: false})
+              }}
+              
+            />
+          </Box>
+          <Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(510),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`
+          }}>
+            <Button
+              size='lg'
+              color='white'
+              bg={WARNA.biruTua}
+              radius={30}
+              fullWidth
+             >
+              Simpan
+            </Button>
+
+            <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+              description="Apakah Anda yakin ingin mengedit banner ini?"
+              onYes={(val) => {
+    
+                setOpenModal(false)
+              }}
             />
           </Box>
-          <Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
         </Box>
       </Box>
     </Box>

src/module/banner/ui/list_banner.tsx

@@ -16,29 +16,12 @@ function ListBanner() {
   const router = useRouter();
   const param = useParams<{ id: string }>()
   const [isOpenModalView, setOpenModalView] = useState(false)
-  const [isOpen, setOpen] = useState(false)
+  const [isOpenModal, setOpenModal] = useState(false)
   const [openDrawer, setOpenDrawer] = useState(false);
   const [idDataStorage, setIdDataStorage] = useState('')
   const [isExtension, setExtension] = useState('')
   
  
-
-  // async function onTrue(val: boolean) {
-  //   if (val) {
-  //     const response = await funDeleteBanner(param.id)
-  //     if (response.success) {
-  //       toast.success(response.message)
-  //       onDeleted(true)
-  //     } else {
-  //       toast.error(response.message)
-  //       onDeleted(false)
-  //     }
-  //   } else {
-  //     onDeleted(false)
-  //   }
-
-  //   setOpen(false)
-  // }
   return (
     <Box pt={2}>
       <Box p={20}>
@@ -56,12 +39,12 @@ function ListBanner() {
 
                 }}>
                 <Group mt={"15"}>
-                <ActionIcon variant='transparent' w={"100"}>
+                  <ActionIcon variant='transparent' w={"100"}>
-                <Image radius={"xs"} src={"/assets/img/banner/Banner-1.png"} alt='' w={76} h={38.9} />
+                    <Image radius={"xs"} src={"/assets/img/banner/Banner-1.png"} alt='' w={76} h={38.9} />
                   </ActionIcon>
                   <Flex direction={"column"}>
-                  <Text c={"dark"} >Banner {index + 1}</Text>
+                    <Text c={"dark"} >Banner {index + 1}</Text>
-                  <Text fz={"h6"} fw={"inherit"} c={"dark"}>Banner</Text>
+                    <Text fz={"h6"} fw={"inherit"} c={"dark"}>Banner</Text>
                   </Flex>
                 </Group>
               </Paper>
@@ -71,49 +54,53 @@ function ListBanner() {
         </Anchor>
       </Box>
 
-      <LayoutDrawer
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-        opened={openDrawer}
+        <Box>
-        onClose={() => setOpenDrawer(false)}
+          <Stack pt={10}>
-        title={<Text lineClamp={1}>{"Menu"}</Text>}
+            <SimpleGrid
-      >
+              cols={{ base: 2, sm: 3, lg: 3 }}
-        <SimpleGrid
+              style={{
-          m={20}
+                alignContent: "flex-start",
-          cols={{ base: 3, sm: 3, lg: 3 }}
+                alignItems: "flex-start"
-        >
+              }}
-          <Box>
+            >
-            <Anchor underline='never' onClick={() => router.push("/banner/edit/[id]")}>
+              <Flex onClick={() => router.push("/banner/edit/[id]")} direction="column" align="center" justify="center" pb={20}>
-              <Flex direction="column" align="center" justify="center">
+                <Box>
-                <FaPencil size={30} color={WARNA.biruTua} />
+                  <FaPencil size={30} color={WARNA.biruTua} />
-                <Text c={"dark"} mt={10} ta="center">Edit</Text>
+                </Box>
+                <Box>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Edit</Text>
+                </Box>
               </Flex>
-            </Anchor>
-          </Box>
-          <Box>
-            <Anchor underline='never' onClick={() => {setOpenModalView(true)}}>
-              <Flex direction="column" align="center" justify="center">
-                <FaFile size={30} color={WARNA.biruTua} />
-                <Text c={"dark"} mt={10} ta="center">Lihat File</Text>
-              </Flex>
-            </Anchor>
-          </Box>
-          <Box>
-            <Anchor underline='never' onClick={() => {setOpen(true)}}>
-              <Flex direction="column" align="center" justify="center">
-                <FaTrash size={30} color={WARNA.biruTua} />
-                <Text c={"dark"} mt={10} ta="center">Hapus</Text>
-              </Flex>
-            </Anchor>
-          </Box>
-        </SimpleGrid>
-      </LayoutDrawer>
 
-      <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+              <Flex onClick={() => { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}>
+                <Box>
+                  <FaFile size={30} color={tema.get().utama} />
+                </Box>
+                <Box>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Lihat File</Text>
+                </Box>
+              </Flex>
+
+              <Flex onClick={() => { setOpenModal(true) }} direction={"column"} align={"center"} justify={"center"}>
+                <Box>
+                  <FaTrash size={30} color={tema.get().utama} />
+                </Box>
+                <Box>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Hapus</Text>
+                </Box>
+              </Flex>
+            </SimpleGrid>
+          </Stack>
+        </Box>
+      </LayoutDrawer>
+      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
         description='Apakah Anda yakin ingin menghapus banner?'
-        onYes={(val) => { setOpen(false) }} />
+        onYes={(val) => { setOpenModal(false) }} />
 
       <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
     </Box>
   );
 }
+  export default ListBanner;
 
-export default ListBanner;