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

Merge pull request #7 from bipproduction/lukman-sdm-3-juni-2024

Browse Source 
Lukman sdm 3 juni 2024
This commit is contained in:
Amalia
2024-07-03 16:12:41 +08:00
committed by GitHub
parent 8a996b15d4 746993c688
commit 313d39bfc6
10 changed files with 298 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -12,7 +12,7 @@
"seed": "tsx prisma/seed.ts"
},
"dependencies": {
"@mantine/carousel": "^7.11.0",
"@mantine/carousel": "^7.11.1",
"@mantine/charts": "^7.11.0",
"@mantine/code-highlight": "^7.11.0",
"@mantine/core": "^7.11.0",
@@ -31,10 +31,12 @@
"@tiptap/react": "^2.4.0",
"@tiptap/starter-kit": "^2.4.0",
"dayjs": "^1.11.11",
"embla-carousel-react": "^8.1.6",
"embla-carousel-autoplay": "^7.1.0",
"embla-carousel-react": "^7.1.0",
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.2.1",
"recharts": "2"
},
"devDependencies": {

10
src/app/(application)/detail-feature/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewDetailFeature } from '@/module/home';
import React from 'react';
function Page() {
return (
<ViewDetailFeature/>
);
}
export default Page;

1
src/app/layout.tsx
View File

@@ -8,6 +8,7 @@ import {
} from "@mantine/core";
import { WARNA } from "@/module/_global";
import { Lato } from "next/font/google";
import '@mantine/carousel/styles.css';
export const metadata = {
title: "SISTEM DESA MANDIRI",

1
src/module/_global/fun/WARNA.ts
View File

@@ -1,4 +1,5 @@
export const WARNA = {
bgWhite: "#F4F9FD",
biruTua: "#19345E",
bgIcon: "#384288"
}

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>
</>
);
}

42
yarn.lock
View File

@@ -160,10 +160,10 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
"@mantine/carousel@^7.11.0":
version "7.11.0"
resolved "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.11.0.tgz"
integrity sha512-NVyChCtBfi8HOZkN6i9FPC2ZGkjjaNTtZDsbu22rYb3iHteKDS76Hp5hy04b2eLGwglHERCMeZu4g5Nf2ZSa/Q==
"@mantine/carousel@^7.11.1":
version "7.11.1"
resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-7.11.1.tgz#0d586c1bd9230b5c93a36479309499d2e5451f7a"
integrity sha512-w/hDZKkfamaiADhtWwo33ssrR8c6N9neVo5o5fep36k1R56+7+pFSm51g0/YgH8Y41GyLGzSVcGDvVGWOzg3+Q==
"@mantine/charts@^7.11.0":
version "7.11.0"
@@ -1300,23 +1300,22 @@ eastasianwidth@^0.2.0:
resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
embla-carousel-react@^8.1.6:
version "8.1.6"
resolved "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.6.tgz"
integrity sha512-DHxwFzF63yVrU95Eo58E9Xr5b6Y9ul6TTsqb/rtwMi+jXudAmIqN1i9iBxQ73i8jKuUVxll/ziNYMmnWvrdQJQ==
embla-carousel-autoplay@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-7.1.0.tgz#766a45eb5f21b9e3ff4bd1d91b4c3c578c04d8b6"
integrity sha512-nYfgSGn3ek44OzwO0t/Ptuxq4PNPD5l7Y9X7JjLYI/DN1uGjqxz9L73YYqR6YCRDnTYJ88s9fep48dzBnSG4vQ==
embla-carousel-react@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz#e716f4df7fd31f7ca3e59a3e011158167bc3c468"
integrity sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ==
dependencies:
embla-carousel "8.1.6"
embla-carousel-reactive-utils "8.1.6"
embla-carousel "7.1.0"
embla-carousel-reactive-utils@8.1.6:
version "8.1.6"
resolved "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.6.tgz"
integrity sha512-Wg+J2YoqLqkaqsXi7fTJaLmXm6BpgDRJ0EfTdvQ4KE/ip5OsUuKGpJsEQDTt4waGXSDyZhIBlfoQtgGJeyYQ1Q==
embla-carousel@8.1.6:
version "8.1.6"
resolved "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.6.tgz"
integrity sha512-9n7FVsbPAs1KD+JmO84DnEDOZMXPBQbLujjMQqvsBRN2CDWwgZ9hRSNapztdPnyJfzOIxowGmj0BUQ8ACYAPkA==
embla-carousel@7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-7.1.0.tgz#c770dd3ade9285a97f5e3b6bbf705bc35ec0f9b5"
integrity sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q==
emoji-regex@^8.0.0:
version "8.0.0"
@@ -2810,6 +2809,11 @@ react-dropzone-esm@15.0.1:
dependencies:
prop-types "^15.8.1"
react-icons@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
react-is@^16.10.2, react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"