style : add home
Deskripsi: - add home - add view detail feature No issue
This commit is contained in:
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';
|
||||
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>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user