item division

src/module/division/ui/DivisionCreate.tsx

@@ -21,6 +21,7 @@ export function DivisionCreate() {
     const [selectedAdmin, setSelectedAdmin] = useState("")
     const [selectedGroup, setSelectedGroup] = useState("")
 
+
     return <Stack p={"md"} gap={"md"} >
         <SingleSelect
             desc="Pilih Grup"

src/module/division/ui/DivisionView.tsx

@@ -1,10 +1,270 @@
 'use client'
-import { Stack } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Avatar, Box, Center, Flex, Grid, Image, Paper, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import { MdAccountCircle, MdArrowForwardIos, MdCalendarMonth, MdEditCalendar, MdEditDocument, MdFileCopy, MdMessage, MdPeople, MdTimer, MdWhatsapp } from "react-icons/md";
+import * as ICON from './../lib/file_icon'
+import { WARNA } from "@/module/_global";
+const listCaresoul = [
+    {
+        "id": "1",
+        "title": "title 1",
+        "description": "description 1",
+        "image": "https://cdn.digitaldesa.com/uploads/landing/artikel/thumbs/360175162e868c7d0ae0dc7dbc62adf9.jpg",
+    },
+    {
+        "id": "2",
+        "title": "title 2",
+        "description": "description 2",
+        "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxDUAjhyxqYuPigHXxQev_jX2zVqy9ULX5vQ&s",
+    },
+    {
+        "id": "3",
+        "title": "title 3",
+        "description": "description 3",
+        "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxDUAjhyxqYuPigHXxQev_jX2zVqy9ULX5vQ&s",
+    }
+]
+
+const listFeatures = [
+
+    {
+        "id": "1",
+        "title": "tugas",
+        "description": "description 1",
+        "total": "10",
+        "icon": MdEditDocument
+    },
+    {
+        "id": "2",
+        "title": "document",
+        "description": "description 2",
+        "total": "10",
+        "icon": MdFileCopy
+    },
+    {
+        "id": "3",
+        "title": "diskusi",
+        "description": "description 3",
+        "total": "10",
+        "icon": MdWhatsapp
+    },
+    {
+        "id": "4",
+        "title": "kalendar",
+        "description": "kalendar",
+        "total": "10",
+        "icon": MdEditCalendar
+    }
+]
+
+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),
+    }
+]
+
+const listTugasHariIni = [
+
+    {
+        "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),
+    },
+]
+
+const diskusiTerbaru = [
+
+    {
+        "id": "1",
+        "title": "image 1",
+        "user": "description 1",
+        "date": "10-10-2022"
+    },
+    {
+        "id": "2",
+        "title": "data pdf",
+        "user": "description 2",
+        "date": "10-10-2022"
+    },
+    {
+        "id": "3",
+        "title": "data pdf 3",
+        "user": "description 3",
+        "date": "10-10-2022"
+    },
+    {
+        "id": "4",
+        "title": "text 4",
+        "user": "description 4",
+        "date": "10-10-2022"
+    },
+    {
+        "id": "5",
+        "title": "text 5",
+        "user": "description 5",
+        "date": "10-10-2022"
+    }
+]
+
 
 export function DivisionView({ id }: { id: string }) {
     return (
         <Stack>
-            division view
+            <Carousel withIndicators height={200}>
+                {listCaresoul.map((v) => <Carousel.Slide key={v.id} p={"md"}>
+                    <Paper withBorder shadow="sm" radius={12}>
+                        <Image src={v.image} alt="image" />
+                    </Paper>
+                </Carousel.Slide>)}
+            </Carousel>
+            <Stack p={"md"}>
+                <Title order={4}>Features</Title>
+                <SimpleGrid cols={2} spacing={"md"}>
+                    {listFeatures.map((v) => <UnstyledButton key={v.id}>
+                        <Paper withBorder radius={12} p={"sm"}>
+                            <Grid >
+                                <Grid.Col span={"content"}>
+                                    <Avatar size={"lg"} bg={"#DCEED8"} color={WARNA.biruTua}>
+                                        <v.icon size={"2.5rem"} />
+                                    </Avatar>
+                                </Grid.Col>
+                                <Grid.Col span={"auto"}>
+                                    <Stack gap={0}>
+                                        <Box>
+                                            <Title order={5}>{v.title}</Title>
+                                        </Box>
+                                        <Flex justify={"space-between"} align={"center"}>
+                                            <Text size="sm" c="dimmed">{v.total} totall</Text>
+                                            <MdArrowForwardIos />
+                                        </Flex>
+                                    </Stack>
+                                </Grid.Col>
+                            </Grid>
+                        </Paper>
+                    </UnstyledButton>)}
+                </SimpleGrid>
+            </Stack>
+            <Stack p={"md"}>
+                <Title order={4}>Tugas Hari Ini</Title>
+                <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+                    {listTugasHariIni.map((v) => <Carousel.Slide key={v.id}>
+                        <UnstyledButton>
+                            <Paper withBorder shadow="sm" radius={12} p={"md"} w={300} bg={WARNA.biruTua}>
+                                <Stack>
+                                    <Title order={5} c={"white"} >{v.title}</Title>
+                                    <Flex w={"100%"} justify={"space-between"} align={"center"}>
+                                        <Flex gap={"sm"}>
+                                            <MdCalendarMonth color={"white"} size={"1.5rem"} />
+                                            <Text c={"white"}>{v.description}</Text>
+                                        </Flex>
+                                        <Avatar.Group>
+                                            <Avatar size={"md"} >
+                                                <MdAccountCircle size={"2.5rem"} />
+                                            </Avatar>
+                                            <Avatar size={"md"}>
+                                                + 15
+                                            </Avatar>
+                                        </Avatar.Group>
+                                    </Flex>
+                                </Stack>
+                            </Paper>
+                        </UnstyledButton>
+                    </Carousel.Slide>)}
+                </Carousel>
+            </Stack>
+            <Stack p={"md"}>
+                <Title order={4}>Document Terbaru</Title>
+                <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>
+            </Stack>
+            <Stack p={"md"}>
+                <Title order={4}>Diskusi Terbaru</Title>
+                <Stack gap={"md"}>
+                    {diskusiTerbaru.map((v) => <UnstyledButton key={v.id}>
+                        <Paper withBorder radius={12} p={"md"}>
+                            <Stack>
+                                <Flex gap={"md"} align={"center"}>
+                                    <MdMessage size={"1.5rem"} />
+                                    <Title order={4}>{v.title}</Title>
+                                </Flex>
+                                <Flex justify={"space-between"} align={"center"}>
+                                    <Flex gap={"xs"} align={"center"} c={"dimmed"}>
+                                        <MdAccountCircle size={"1.5rem"} />
+                                        <Text>{v.user}</Text>
+                                    </Flex>
+                                    <Flex gap={"xs"} align={"center"} c={"dimmed"}>
+                                        <MdTimer size={"1.5rem"} />
+                                        <Text>{v.date}</Text>
+                                    </Flex>
+                                </Flex>
+                            </Stack>
+                        </Paper>
+                    </UnstyledButton>)}
+                </Stack>
+            </Stack>
         </Stack>
     )
 }