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

style : add home

Browse Source 
Deskripsi:
- add home
- add view detail feature

No issue
This commit is contained in:
lukman
2024-07-03 16:09:36 +08:00
parent 9805d78f9f
commit 0ae66a3516
5 changed files with 259 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/module/home/components/carosole.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { WARNA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
export default function Carosole() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
return (
<>
<Carousel
withIndicators
height={150}
plugins={[autoplay.current]}
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
</Carousel>
</>
);
}

78
src/module/home/components/features.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
export default function Features() {
const router = useRouter()
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
<SimpleGrid
cols={{ base: 4, sm: 4, lg: 4 }}
>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Proyek</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
</Center>
</Box>
<Box onClick={() => router.push('detail-feature')}>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiSquares2X2 size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Semua</Text>
</Center>
</Box>
</SimpleGrid>
</Box>
</>
);
}

4
src/module/home/index.ts
View File

@@ -1,3 +1,5 @@
import ViewDetailFeature from "./view/view_detail_feature";
import ViewHome from "./view/view_home";
export {ViewHome}
export { ViewHome }
export {ViewDetailFeature}

113
src/module/home/view/view_detail_feature.tsx Normal file
View File

@@ -0,0 +1,113 @@
import { LayoutNavbarHome, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
import { PiUsersFourFill } from "react-icons/pi";
import { FaUsersRays, FaUserTie } from "react-icons/fa6";
export default function ViewDetailFeature() {
return (
<>
<LayoutNavbarHome>
<Group >
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
<Text fw={'bold'} c={'white'} >Semua Fitur</Text>
</Group>
</LayoutNavbarHome>
<Box p={20}>
<Box >
<SimpleGrid
cols={{ base: 4, sm: 4, lg: 4 }}
>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Proyek</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<PiUsersFourFill size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Anggota</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiUsers size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Group</Text>
</Center>
</Box>
<Box>
<Center>
<ActionIcon variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTie size={35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Jabatan</Text>
</Center>
</Box>
</SimpleGrid>
</Box>
</Box>
</>
);
}

38
src/module/home/view/view_home.tsx
View File

@@ -1,16 +1,38 @@
import { LayoutNavbarHome } from '@/module/_global';
import { Group, Text } from '@mantine/core';
"use client"
import { LayoutNavbarHome, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, rem, Stack, Text } from '@mantine/core';
import React from 'react';
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
import Carosole from '../components/carosole';
import Features from '../components/features';
export default function ViewHome() {
return (
<>
<LayoutNavbarHome>
<Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
<Text fw={'bold'} c={'white'} >icon</Text>
</Group>
</LayoutNavbarHome>
<LayoutNavbarHome>
<Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
<Group>
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineBell size={20} color='white' />
</ActionIcon>
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineUser size={20} color='white' />
</ActionIcon>
</Group>
</Group>
</LayoutNavbarHome>
<Box p={20}>
<Stack >
<Carosole />
<Features/>
</Stack>
</Box>
</>
);
}