wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-17 17:49:20 +08:00
parent 4e4160ed83
commit 048b2632a9
27 changed files with 357 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/module/home/ui/list_divisi.tsx
View File

@@ -8,7 +8,7 @@ import { useState } from "react";
import { IDataHomeDivision } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
export default function ListDivisi() {
@@ -41,6 +41,7 @@ export default function ListDivisi() {
useShallowEffect(() => {
fetchData();
}, []);
const isMobile = useMediaQuery('(max-width: 369px)');
return (
@@ -61,18 +62,21 @@ export default function ListDivisi() {
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400
}}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={tema.get().bgFiturHome}>
<Box h={isMobile ? 100 : 120} bg={tema.get().bgFiturHome}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
<Title order={isMobile ? 4 : 3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.jumlah}</Text>
<Box pt={10} mih={isMobile ? 100 : 150}>
<Text fw={'bold'} fz={isMobile ? 15 : 18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={isMobile ? 50 : 70}>{v.jumlah}</Text>
</Box>
</Card>
</Box>

17
src/module/home/ui/list_project.tsx
View File

@@ -2,7 +2,7 @@
import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -41,6 +41,8 @@ export default function ListProjects() {
useShallowEffect(() => {
fetchData();
}, []);
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
@@ -60,22 +62,25 @@ export default function ListProjects() {
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400
}}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={tema.get().utama}>
<Box h={isMobile ? 100 : 120} bg={tema.get().utama}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
<Title order={isMobile ? 4 : 3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Stack h={150} align="stretch" justify="center">
<Stack h={isMobile ? 100 : 150} align="stretch" justify="center">
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={tema.get().utama}>{v.createdAt}</Text>
<Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
</Stack>
</Card>
</Box>