diff --git a/public/assets/img/banner/Banner-1.png b/public/assets/img/banner/Banner-1.png new file mode 100644 index 0000000..4b1a4ec Binary files /dev/null and b/public/assets/img/banner/Banner-1.png differ diff --git a/src/app/(application)/banner/create/page.tsx b/src/app/(application)/banner/create/page.tsx index 78a7dff..6855875 100644 --- a/src/app/(application)/banner/create/page.tsx +++ b/src/app/(application)/banner/create/page.tsx @@ -1,3 +1,7 @@ +import { CreateBanner } from "@/module/banner"; + export default function Page() { - return
Tambah Banner
; + return ( + + ); } \ No newline at end of file diff --git a/src/app/(application)/banner/page.tsx b/src/app/(application)/banner/page.tsx index 057359c..cf5edef 100644 --- a/src/app/(application)/banner/page.tsx +++ b/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
List Banner
; + return ( + + + + + + ); } \ No newline at end of file diff --git a/src/module/banner/index.ts b/src/module/banner/index.ts index 0a07d17..9b3343f 100644 --- a/src/module/banner/index.ts +++ b/src/module/banner/index.ts @@ -1 +1,4 @@ -//cobaa \ No newline at end of file +import NavbarBanner from "./ui/navbar_banner"; +import ListBanner from "./ui/list_banner"; +import CreateBanner from "./ui/create_banner"; +export {NavbarBanner, ListBanner, CreateBanner} \ No newline at end of file diff --git a/src/module/banner/ui/create_banner.tsx b/src/module/banner/ui/create_banner.tsx new file mode 100644 index 0000000..954cf34 --- /dev/null +++ b/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) { + return ( + + } /> + + + + console.log('accepted files', files)} + onReject={(files) => console.log('rejected files', files)} + maxSize={5 * 1024 ** 2} + accept={IMAGE_MIME_TYPE} + {...props} + > + + + + + + + + + + + + + + Upload File + + + File Tidak Boleh Melebihi 500mb + + + + + + + Judul Banner} + placeholder='Judul Banner' + styles={{ + input: { + border: `1px solid ${"#D6D8F6"}`, + borderRadius: 10, + }, + }} + /> + + + + + + ); +} + +export default CreateBanner; diff --git a/src/module/banner/ui/drawer_banner.tsx b/src/module/banner/ui/drawer_banner.tsx new file mode 100644 index 0000000..1ceffba --- /dev/null +++ b/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 ( + + + setOpenDrawerBanner(true)} + > + router.push("/banner/create")}> + + + + + + Tambah Banner + + + + + + + ); +} + +export default DrawerBanner; diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx new file mode 100644 index 0000000..3283170 --- /dev/null +++ b/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 ( + + + + + {[...Array(5)].map((_, index) => ( +
{ setOpenDrawer(true) }}> + Banner {index + 1} + +
+ ))} + + + + + + setOpenDrawer(false)} + title={{"Menu"}} + > + + + + + + Edit + + + + + + + + View File + + + + + + + + Hapus + + + + + + + ); +} + +export default ListBanner; diff --git a/src/module/banner/ui/navbar_banner.tsx b/src/module/banner/ui/navbar_banner.tsx new file mode 100644 index 0000000..28efcb7 --- /dev/null +++ b/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 ( + <> + setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + } + /> + setOpen(false)}> + { setOpen(false) }} /> + + + ); +} + +export default NavbarBanner; diff --git a/src/module/home/ui/features.tsx b/src/module/home/ui/features.tsx index b0503bf..086e87d 100644 --- a/src/module/home/ui/features.tsx +++ b/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)'); diff --git a/src/module/home/ui/view_detail_feature.tsx b/src/module/home/ui/view_detail_feature.tsx index 49ad609..97b0654 100644 --- a/src/module/home/ui/view_detail_feature.tsx +++ b/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() { Tema + router.push('/banner')}> +
+ + + +
+
+ Banner +
+ }