Banner Feature

src/app/(application)/banner/create/page.tsx

@@ -1,3 +1,7 @@
+import { CreateBanner } from "@/module/banner";
+
 export default function Page() {
-   return <div>Tambah Banner</div>;
+   return (
+      <CreateBanner/>
+   );
 }

src/app/(application)/banner/page.tsx

@@ -1,3 +1,13 @@
+
+import { ListBanner, NavbarBanner } from "@/module/banner";
+import { Box } from "@mantine/core";
+
 export default function Page() {
-   return <div>List Banner</div>;
+   return (
+      <Box>
+         <NavbarBanner />
+         <ListBanner />
+    
+      </Box>
+   );
 }

src/module/banner/index.ts

@@ -1 +1,4 @@
-//cobaa
+import NavbarBanner from "./ui/navbar_banner";
+import ListBanner from "./ui/list_banner";
+import CreateBanner from "./ui/create_banner";
+export {NavbarBanner, ListBanner, CreateBanner}

src/module/banner/ui/create_banner.tsx

@@ -0,0 +1,73 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, FileInput, Group, Paper, rem, Text, TextInput } from '@mantine/core';
+import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import React from 'react';
+
+function CreateBanner(props: Partial<DropzoneProps>) {
+  return (
+    <Box>
+      <LayoutNavbarNew back='/banner' title='Tambah Banner' menu={<></>} />
+      <Box p={20}>
+        <Box>
+          <Paper withBorder radius={20}>
+            <Dropzone
+              onDrop={(files) => console.log('accepted files', files)}
+              onReject={(files) => console.log('rejected files', files)}
+              maxSize={5 * 1024 ** 2}
+              accept={IMAGE_MIME_TYPE}
+              {...props}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto
+                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
+                    stroke={1.5}
+                  />
+                </Dropzone.Idle>
+
+                <Box>
+                  <Text size="xl" inline>
+                    Upload File 
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                 File Tidak Boleh Melebihi 500mb
+                  </Text>
+                </Box>
+              </Group>
+            </Dropzone>
+          </Paper>
+          <Box>
+            <TextInput
+              mt={10}
+              label={ <Text>Judul Banner</Text>}
+              placeholder='Judul Banner'
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+            />
+          </Box>
+          <Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateBanner;

src/module/banner/ui/drawer_banner.tsx

@@ -0,0 +1,35 @@
+import { TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Anchor, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { IoAddCircle } from 'react-icons/io5';
+
+function DrawerBanner({ onSuccess, }: { onSuccess: (val: boolean) => void; }) {
+  const [openDrawerBanner, setOpenDrawerBanner] = useState(false);
+  const tema = useHookstate(TEMA)
+  const router = useRouter();
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerBanner(true)}
+        >
+          <Anchor underline='never' onClick={() => router.push("/banner/create")}>
+            <Flex justify={"center"} align={"center"} direction={"column"}>
+              <Box>
+                <IoAddCircle size={30} color={tema.get().utama} />
+              </Box>
+              <Box>
+                <Text c={tema.get().utama}>Tambah Banner</Text>
+              </Box>
+            </Flex>
+          </Anchor>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default DrawerBanner;

src/module/banner/ui/list_banner.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Anchor, Box, Flex, Group, Image, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import _ from 'lodash';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { IoAddCircle } from 'react-icons/io5';
+
+function ListBanner() {
+  const tema = useHookstate(TEMA)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [loading, setLoading] = useState(true);
+  const [isData, setData] = useState([]);
+  const [valChoose, setValChoose] = useState("");
+  const router = useRouter();
+
+
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <Box pt={20}>
+      <Box>
+        <Anchor underline='never'>
+          <Stack align='center' justify='center'>
+            {[...Array(5)].map((_, index) => (
+              <div key={index} onClick={() => { setOpenDrawer(true) }}>
+                <Text c={"dark"} ta={"center"}>Banner {index + 1}</Text>
+                <Image radius={"lg"} src={`/assets/img/banner/Banner-${index + 1}.png`} alt='' w={380} h={194.5} />
+              </div>
+            ))}
+
+          </Stack>
+        </Anchor>
+      </Box>
+
+      <LayoutDrawer
+        opened={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        title={<Text lineClamp={1}>{"Menu"}</Text>}
+      >
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+        >
+          <Box>
+            <Anchor underline='never'>
+            <Flex direction={"column"}>
+              <FaPencil size={30} color={WARNA.biruTua} />
+              <Text c={"dark"} mt={10}>Edit</Text>
+            </Flex>
+            </Anchor>
+          </Box>
+          <Box>
+            <Anchor underline='never'>
+            <Flex direction={"column"}>
+              <FaFile size={30} color={WARNA.biruTua} />
+              <Text c={"dark"} mt={10}>View File</Text>
+            </Flex>
+            </Anchor>
+          </Box>
+          <Box >
+            <Anchor underline='never'>
+            <Flex direction={"column"}>
+              <FaTrash size={30} color={WARNA.biruTua} />
+              <Text ta="center" c={"dark"} mt={10}>Hapus</Text>
+            </Flex>
+            </Anchor>
+          </Box>
+        </SimpleGrid>
+      </LayoutDrawer>
+    </Box>
+  );
+}
+
+export default ListBanner;

src/module/banner/ui/navbar_banner.tsx

@@ -0,0 +1,28 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { ActionIcon, rem } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiMenu } from 'react-icons/hi';
+import DrawerBanner from './drawer_banner';
+
+function NavbarBanner() {
+  const [isOpen, setOpen] = useState(false)
+  const tema = useHookstate(TEMA)
+  return (
+    <>
+      <LayoutNavbarNew back='/home' title='Banner'
+        menu={
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiMenu size={20} color='white' />
+          </ActionIcon>
+        }
+      />
+      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+        <DrawerBanner onSuccess={() => { setOpen(false) }} />
+      </LayoutDrawer>
+    </>
+  );
+}
+
+export default NavbarBanner;

src/module/home/ui/features.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
 
+
 export default function Features() {
   const router = useRouter()
   const isMobile = useMediaQuery('(max-width: 369px)');

src/module/home/ui/view_detail_feature.tsx

@@ -9,6 +9,7 @@ import { FaUserTag, FaUserTie } from 'react-icons/fa6';
 import { useHookstate } from '@hookstate/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IoColorPalette, IoColorPaletteOutline } from 'react-icons/io5';
+import { RiLayoutTop2Fill } from "react-icons/ri";
 
 export default function ViewDetailFeature() {
   const router = useRouter()
@@ -138,6 +139,22 @@ export default function ViewDetailFeature() {
                     <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Tema</Text>
                   </Center>
                 </Box>
+                <Box onClick={() => router.push('/banner')}>
+                  <Center>
+                    <ActionIcon variant="gradient"
+                      size={isMobile ? 50 : 68}
+                      aria-label="Gradient action icon"
+                      radius={100}
+                      // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                      bg={tema.get().bgFiturHome}
+                    >
+                      <RiLayoutTop2Fill size={isMobile ? 25 : 35} color={tema.get().utama} />
+                    </ActionIcon>
+                  </Center>
+                  <Center>
+                    <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Banner</Text>
+                  </Center>
+                </Box>
               </>
             }