style : update documents

This commit is contained in:
lukman
2024-07-19 13:59:52 +08:00
parent 466ddeb7e6
commit cf2e56d174
7 changed files with 139 additions and 125 deletions

View File

@@ -1,76 +1,88 @@
import { WARNA } from "@/module/_global"
import { Box, Group, Text } from "@mantine/core"
import { CiUser, CiClock2 } from "react-icons/ci"
import { GoDiscussionClosed } from "react-icons/go"
"use client"
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { CiUser, CiClock2 } from "react-icons/ci";
import { GoDiscussionClosed } from "react-icons/go";
const dataDiskusi = [
{
id: 1,
judul: 'Mengatasi Limbah Makanan ',
user: 'Fibra Marcell',
date: '21 Juni 2024'
},
{
id: 2,
judul: 'Pentingnya Menjaga Kelestarian Hutan ',
user: 'Bayu Tegar',
date: '15 Juni 2024'
},
{
id: 3,
judul: 'Mengatasi Limbah Industri ',
user: 'Nian Putri',
date: '11 Mei 2024'
},
{
id: 4,
judul: 'Manfaat Sampah Plastik',
user: 'Budi Prasetyo',
date: '10 Mei 2024'
},
]
{
id: 1,
judul: "Mengatasi Limbah Makanan ",
user: "Fibra Marcell",
date: "21 Juni 2024",
},
{
id: 2,
judul: "Pentingnya Menjaga Kelestarian Hutan ",
user: "Bayu Tegar",
date: "15 Juni 2024",
},
{
id: 3,
judul: "Mengatasi Limbah Industri ",
user: "Nian Putri",
date: "11 Mei 2024",
},
{
id: 4,
judul: "Manfaat Sampah Plastik",
user: "Budi Prasetyo",
date: "10 Mei 2024",
},
];
export default function ListDiscussionOnDetailDivision() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi Terbaru</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{
dataDiskusi.map((v, i) => {
return (
<Box key={i} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}} mb={10}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={'bold'} truncate="end">{v.judul}</Text>
</Box>
</Group>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<CiUser size={18} />
<Text fz={13}>{v.user}</Text>
</Group >
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group>
</Group>
</Box>
)
})
}
</Box>
</Box>
</>
)
}
const router = useRouter();
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
Diskusi Terbaru
</Text>
<Box
bg={"white"}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
}}
>
{dataDiskusi.map((v, i) => {
return (
<Box
key={i}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
mb={10}
onClick={() => router.push(`/discussion/${v.id}`)}
>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
{v.judul}
</Text>
</Box>
</Group>
<Group justify="space-between" mt={20} c={"#8C8C8C"}>
<Group gap={5} align="center">
<CiUser size={18} />
<Text fz={13}>{v.user}</Text>
</Group>
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group>
</Group>
</Box>
);
})}
</Box>
</Box>
</>
);
}

View File

@@ -3,6 +3,7 @@ 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'
import { useRouter } from "next/navigation";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
@@ -41,13 +42,14 @@ const listDocument = [
]
export default function ListDocumentOnDetailDivision() {
const router = useRouter()
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>
<UnstyledButton onClick={() => router.push(`/document`)}>
<Stack gap={0}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>

View File

@@ -2,6 +2,7 @@
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { CiClock2 } from "react-icons/ci";
import { MdAccountCircle } from "react-icons/md";
@@ -33,13 +34,14 @@ const dataTask = [
]
export default function ListTaskOnDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataTask.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{ base: 300, md: 400 }} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
<Group justify="space-between" mt={20} c={'#aeaeae'}>
<Group gap={5} align="center">