Merge pull request #42 from bipproduction/lukman/10-juli-2024
style : add division
This commit is contained in:
Amalia
@@ -1,4 +1,5 @@
|
|||||||
import { ViewDivision } from '@/module/new_division';
|
|
||||||
|
import { ViewDivision } from '@/module/division_new';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
function Page() {
|
function Page() {
|
||||||
|
|||||||
46
src/module/division_new/components/ui/drawer_division.tsx
Normal file
46
src/module/division_new/components/ui/drawer_division.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
"use client"
|
||||||
|
import { WARNA } from '@/module/_global';
|
||||||
|
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { HiOutlineFilter } from 'react-icons/hi';
|
||||||
|
import { IoAddCircle } from 'react-icons/io5';
|
||||||
|
import { TbReportAnalytics } from "react-icons/tb";
|
||||||
|
|
||||||
|
export default function DrawerDivision() {
|
||||||
|
const router = useRouter()
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Stack pt={10}>
|
||||||
|
<SimpleGrid
|
||||||
|
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||||
|
>
|
||||||
|
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<IoAddCircle size={30} color={WARNA.biruTua} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Tambah Proyek</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<HiOutlineFilter size={30} color={WARNA.biruTua} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Filter</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<TbReportAnalytics size={30} color={WARNA.biruTua} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Report</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
160
src/module/division_new/components/ui/navbar_division.tsx
Normal file
160
src/module/division_new/components/ui/navbar_division.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
'use client'
|
||||||
|
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||||
|
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { HiMenu } from 'react-icons/hi';
|
||||||
|
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
|
||||||
|
import { MdAccountCircle } from 'react-icons/md';
|
||||||
|
import DrawerDivision from './drawer_division';
|
||||||
|
|
||||||
|
const dataDivisi = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'DIVISI 1',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'DIVISI 2',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'DIVISI 3',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'DIVISI 4',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'DIVISI5',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'DIVISI 6',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function NavbarDivision() {
|
||||||
|
const [isList, setIsList] = useState(false)
|
||||||
|
const router = useRouter()
|
||||||
|
const [openDrawer, setOpenDrawer] = useState(false)
|
||||||
|
|
||||||
|
const handleList = () => {
|
||||||
|
setIsList(!isList)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<LayoutNavbarNew back='/home' title='Divisi'
|
||||||
|
menu={<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||||
|
<HiMenu size={20} color='white' />
|
||||||
|
</ActionIcon>} />
|
||||||
|
<Box p={20}>
|
||||||
|
<Grid justify='center' align='center'>
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<TextInput
|
||||||
|
styles={{
|
||||||
|
input: {
|
||||||
|
color: WARNA.biruTua,
|
||||||
|
borderRadius: '#A3A3A3',
|
||||||
|
borderColor: '#A3A3A3',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
size="md"
|
||||||
|
radius={30}
|
||||||
|
leftSection={<HiMagnifyingGlass size={20} />}
|
||||||
|
placeholder="Pencarian"
|
||||||
|
/>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={'auto'}>
|
||||||
|
<Flex justify={'center'}>
|
||||||
|
{isList ? (
|
||||||
|
<HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
|
||||||
|
) : (
|
||||||
|
<HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Box pt={20}>
|
||||||
|
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
|
||||||
|
<Text fw={'bold'} c={'white'}>Total Divisi</Text>
|
||||||
|
<Flex justify={'center'} align={'center'} h={'100%'}>
|
||||||
|
<Text fz={40} fw={'bold'} c={'white'}>35</Text>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{isList ? (
|
||||||
|
<Box pt={20}>
|
||||||
|
{dataDivisi.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Box key={i}>
|
||||||
|
<Group justify="space-between" mb={10} onClick={() => router.push(``)}>
|
||||||
|
<Group>
|
||||||
|
<Center>
|
||||||
|
<ActionIcon
|
||||||
|
variant="gradient"
|
||||||
|
size={50}
|
||||||
|
aria-label="Gradient action icon"
|
||||||
|
radius={100}
|
||||||
|
gradient={{
|
||||||
|
from: '#DFDA7C',
|
||||||
|
to: '#F2AF46',
|
||||||
|
deg: 174
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Center>
|
||||||
|
<Text>{v.title}</Text>
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
<Divider my="sm" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box pt={20}>
|
||||||
|
{dataDivisi.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Box key={i} mb={20}>
|
||||||
|
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
|
||||||
|
<Card.Section>
|
||||||
|
<Box h={120} bg={WARNA.biruTua}>
|
||||||
|
<Flex justify={'center'} align={'center'} h={"100%"}>
|
||||||
|
<Title order={3} c={"white"}>{v.title}</Title>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Card.Section>
|
||||||
|
<Box pt={10}>
|
||||||
|
<Text>{v.description}</Text>
|
||||||
|
<Group align='center' pt={10} justify='flex-end'>
|
||||||
|
<Avatar.Group>
|
||||||
|
<Avatar>
|
||||||
|
<MdAccountCircle size={32} color={WARNA.biruTua} />
|
||||||
|
</Avatar>
|
||||||
|
<Avatar>+5</Avatar>
|
||||||
|
</Avatar.Group>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||||
|
<DrawerDivision/>
|
||||||
|
</LayoutDrawer>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import NavbarDivision from '../components/ui/navbar_division';
|
||||||
|
|
||||||
export default function ViewDivision() {
|
export default function ViewDivision() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<NavbarDivision />
|
||||||
ViewDivision
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user