Merge pull request #52 from bipproduction/amalia/16-jul-24

upd: detail divisi

src/module/division_new/components/detail_division/detail_division.tsx

@@ -5,6 +5,7 @@ import { LayoutNavbarNew } from '@/module/_global';
 import FeatureDetailDivision from './feature_detail_division';
 import ListDiscussionOnDetailDivision from './list_discussion';
 import ListTaskOnDetailDivision from './list_task';
+import ListDocumentOnDetailDivision from './list_document';
 
 export default function DetailDivision() {
   return (
@@ -15,6 +16,7 @@ export default function DetailDivision() {
           <CarouselDivision />
           <FeatureDetailDivision />
           <ListTaskOnDetailDivision />
+          <ListDocumentOnDetailDivision />
           <ListDiscussionOnDetailDivision />
         </Stack>
       </Box>

src/module/division_new/components/detail_division/list_document.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import { Carousel } from "@mantine/carousel";
+import { Box, Image, Text, Center, Paper, Stack, UnstyledButton } from "@mantine/core";
+import * as ICON from '../../../division/lib/file_icon'
+
+const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
+
+const listDocument = [
+
+   {
+      "id": "1",
+      "title": "image 1",
+      "description": "description 1",
+      "image": iconContainer(ICON.IMAGE),
+   },
+   {
+      "id": "2",
+      "title": "data pdf",
+      "description": "description 2",
+      "image": iconContainer(ICON.PDF),
+   },
+   {
+      "id": "3",
+      "title": "data pdf 3",
+      "description": "description 3",
+      "image": iconContainer(ICON.PDF),
+   },
+   {
+      "id": "4",
+      "title": "text 4",
+      "description": "description 4",
+      "image": iconContainer(ICON.TEXT),
+   },
+   {
+      "id": "5",
+      "title": "text 5",
+      "description": "description 5",
+      "image": iconContainer(ICON.TEXT),
+   }
+]
+
+export default function ListDocumentOnDetailDivision() {
+   return (
+      <Box pt={10}>
+         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
+         <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            {
+               listDocument.map((v) => <Carousel.Slide key={v.id}>
+                  <UnstyledButton>
+                     <Stack gap={0}>
+                        <Paper withBorder shadow="sm" radius={12} >
+                           <Center p={"md"}>
+                              <Image w={"75"} src={v.image} alt="image" />
+                           </Center>
+                        </Paper>
+                        <Box p={"sm"}>
+                           <Text c={"dimmed"}>{v.title}</Text>
+                        </Box>
+                     </Stack>
+                  </UnstyledButton>
+               </Carousel.Slide>
+               )}
+         </Carousel>
+      </Box>
+   )
+}