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-30 17:23:10 +08:00
parent 37e5d0b9b1
commit 030147d9a6
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
'use client' 'use client'
import { TEMA, WARNA } from "@/module/_global"; import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Skeleton } from "@mantine/core"; import { Box, Card, Flex, Title, Text, Skeleton, ActionIcon } from "@mantine/core";
import _ from "lodash"; import _ from "lodash";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -10,6 +10,7 @@ import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { MdMoreVert, MdOutlineReadMore } from "react-icons/md";
export default function ListDivisi() { export default function ListDivisi() {
const router = useRouter() const router = useRouter()
@@ -63,7 +64,7 @@ export default function ListDivisi() {
{isData.map((v) => {isData.map((v) =>
<Carousel.Slide key={v.id} pb={20}> <Carousel.Slide key={v.id} pb={20}>
<Box w={{ <Box w={{
base: isMobile ? 230 : 300, base: isMobile ? 230 : 300,
md: 400 md: 400
}}> }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
@@ -82,6 +83,15 @@ export default function ListDivisi() {
</Box> </Box>
</Carousel.Slide> </Carousel.Slide>
)} )}
{/* MORE ICON */}
{/* <Flex justify={"center"} direction={"column"} align={"center"} onClick={() => { }}>
<ActionIcon variant="subtle" color="gray" >
<IoIosArrowDropright size={40} />
</ActionIcon>
<Text ta={"center"} c={"dimmed"}>Lihat</Text>
<Text ta={"center"} c={"dimmed"} w={100}>Lebih Banyak</Text>
</Flex> */}
</Carousel> </Carousel>
} }
</Box> </Box>

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

@@ -1,7 +1,7 @@
'use client' 'use client'
import { TEMA, WARNA } from "@/module/_global"; import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core"; import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton, ActionIcon } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -10,6 +10,8 @@ import { funGetHome } from "../lib/api_home";
import { IDataHomeKegiatan } from "../lib/type_home"; import { IDataHomeKegiatan } from "../lib/type_home";
import _ from "lodash"; import _ from "lodash";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { MdMoreVert } from "react-icons/md";
import { IoIosArrowDropright } from "react-icons/io";
export default function ListProjects() { export default function ListProjects() {
const router = useRouter() const router = useRouter()
@@ -41,7 +43,7 @@ export default function ListProjects() {
useShallowEffect(() => { useShallowEffect(() => {
fetchData(); fetchData();
}, []); }, []);
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
@@ -59,7 +61,7 @@ export default function ListProjects() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text>
</Box> </Box>
: :
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}> <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{isData.map((v) => {isData.map((v) =>
<Carousel.Slide key={v.id} pb={20}> <Carousel.Slide key={v.id} pb={20}>
<Box w={{ <Box w={{
@@ -86,6 +88,15 @@ export default function ListProjects() {
</Box> </Box>
</Carousel.Slide> </Carousel.Slide>
)} )}
{/* MORE ICON */}
{/* <Flex justify={"center"} direction={"column"} align={"center"} onClick={() => { }}>
<ActionIcon variant="subtle" color="gray" >
<IoIosArrowDropright size={40} />
</ActionIcon>
<Text ta={"center"} c={"dimmed"}>Lihat</Text>
<Text ta={"center"} c={"dimmed"} w={100}>Lebih Banyak</Text>
</Flex> */}
</Carousel> </Carousel>
} }
</Box> </Box>