style : add home
Deskripsi: - add home - add view detail feature No issue
This commit is contained in:
lukman
35
src/module/home/components/carosole.tsx
Normal file
35
src/module/home/components/carosole.tsx
Normal 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
78
src/module/home/components/features.tsx
Normal 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>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import ViewDetailFeature from "./view/view_detail_feature";
|
||||||
import ViewHome from "./view/view_home";
|
import ViewHome from "./view/view_home";
|
||||||
|
|
||||||
export {ViewHome}
|
export { ViewHome }
|
||||||
|
export {ViewDetailFeature}
|
||||||
113
src/module/home/view/view_detail_feature.tsx
Normal file
113
src/module/home/view/view_detail_feature.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,16 +1,38 @@
|
|||||||
import { LayoutNavbarHome } from '@/module/_global';
|
"use client"
|
||||||
import { Group, Text } from '@mantine/core';
|
import { LayoutNavbarHome, WARNA } from '@/module/_global';
|
||||||
|
import { ActionIcon, Box, Group, rem, Stack, Text } from '@mantine/core';
|
||||||
import React from 'react';
|
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() {
|
export default function ViewHome() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LayoutNavbarHome>
|
<LayoutNavbarHome>
|
||||||
<Group justify='space-between'>
|
<Group justify='space-between'>
|
||||||
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
|
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
|
||||||
<Text fw={'bold'} c={'white'} >icon</Text>
|
<Group>
|
||||||
</Group>
|
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||||
</LayoutNavbarHome>
|
<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>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user