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

style : update tema

Browse Source 
Deskripsi:
- update global
- update announcement
- update update color palette
- update group
- update home
- update position
- update project
- update member

No Issue
This commit is contained in:
lukman
2024-09-12 17:31:00 +08:00
parent a211e7e4e4
commit cbdaac6319
80 changed files with 870 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/module/color_palette/ui/create_palette_color.tsx
View File

@@ -1,101 +1,156 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
export default function CreatePaletteColor() {
const [isWarna, setWarna] = useState({
warnaSatu: '',
warnaDua: '',
warnaTiga: '',
warnaEmpat: '',
warnaUtama: '',
backgroundUtama: '',
backgroundIcon: '',
backgroundFiturHome: '',
backgroundFiturDivisi: '',
backgroundTotalKegiatan: '',
})
return (
<Box>
<LayoutNavbarNew back='/color-palette' title='Tambah Palet' menu />
<LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
<Box p={20}>
<Stack>
<ColorInput
label={'Warna 1'}
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaSatu: color })
(color) => setWarna({ ...isWarna, warnaUtama: color })
}
/>
<ColorInput
label={'Warna 2'}
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaDua: color })
(color) => setWarna({ ...isWarna, backgroundUtama: color })
}
/>
<ColorInput
label={'Warna 3'}
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaTiga: color })
(color) => setWarna({ ...isWarna, backgroundIcon: color })
}
/>
<ColorInput
label={'Warna 4'}
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaEmpat: color })
(color) => setWarna({ ...isWarna, backgroundFiturHome: color })
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
}
/>
</Stack>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
<Box>
<Center>
<Box bg={isWarna.warnaSatu} w={50} h={50} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaSatu.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaDua} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaDua.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaTiga} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaTiga.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaEmpat.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
}
</Box>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 6 }}
spacing={{ base: 10, sm: 'xl' }}
verticalSpacing={{ base: 'md', sm: 'xl' }}
>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.warnaUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturDivisi.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
}
</Flex>
</SimpleGrid>
</Flex>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
maxWidth: rem(535),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>

2
src/module/color_palette/ui/drawer_create_palette.tsx
View File

@@ -18,7 +18,7 @@ export default function DrawerCreatePalette() {
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Tambah Palet</Text>
<Text ta={'center'} c={WARNA.biruTua}>Tambah Tema</Text>
</Box>
</Flex>
</SimpleGrid>

15
src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
View File

@@ -1,5 +1,6 @@
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -9,9 +10,15 @@ import { IoAddCircle, IoColorPalette } from 'react-icons/io5';
export default function DrawerPaletEditEndDefault() {
const router = useRouter()
const [isModal, setModal] = useState(false)
const tema = useHookstate(TEMA)
function onCLose(val: boolean) {
setModal(false)
// tema.set({
// ...tema.get(),
// utama:'#000'
// })
// router.refresh()
}
return (
<Box>
@@ -25,7 +32,7 @@ export default function DrawerPaletEditEndDefault() {
<IoColorPalette size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Default Warna</Text>
<Text ta={'center'} c={WARNA.biruTua}>Gunakan Tema</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
@@ -35,13 +42,13 @@ export default function DrawerPaletEditEndDefault() {
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Edit Palet</Text>
<Text ta={'center'} c={WARNA.biruTua}>Edit Tema</Text>
</Box>
</Flex>
</SimpleGrid>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah warna Aplikasi?"
description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
onYes={(val) => { onCLose(val) }} />
</Box>
);

157
src/module/color_palette/ui/edit_palette_color.tsx
View File

@@ -1,101 +1,155 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
export default function EditPaletteColor() {
const [isWarna, setWarna] = useState({
warnaSatu: '',
warnaDua: '',
warnaTiga: '',
warnaEmpat: '',
warnaUtama: '',
backgroundUtama: '',
backgroundIcon: '',
backgroundFiturHome: '',
backgroundFiturDivisi: '',
backgroundTotalKegiatan: '',
})
return (
<Box>
<LayoutNavbarNew back='/color-palette' title='Edit Palet' menu />
<LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
<Box p={20}>
<Stack>
<ColorInput
label={'Warna 1'}
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaSatu: color })
(color) => setWarna({ ...isWarna, warnaUtama: color })
}
/>
<ColorInput
label={'Warna 2'}
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaDua: color })
(color) => setWarna({ ...isWarna, backgroundUtama: color })
}
/>
<ColorInput
label={'Warna 3'}
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaTiga: color })
(color) => setWarna({ ...isWarna, backgroundIcon: color })
}
/>
<ColorInput
label={'Warna 4'}
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaEmpat: color })
(color) => setWarna({ ...isWarna, backgroundFiturHome: color })
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
}
/>
</Stack>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
<Box>
<Center>
<Box bg={isWarna.warnaSatu} w={50} h={50} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaSatu.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaDua} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaDua.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaTiga} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaTiga.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaEmpat.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
}
</Box>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 6 }}
spacing={{ base: 10, sm: 'xl' }}
verticalSpacing={{ base: 'md', sm: 'xl' }}
>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.warnaUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundUtama.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundIcon.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturHome.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundFiturDivisi.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
}
</Flex>
<Flex justify={"center"} direction={"column"}>
<Center>
<Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
borderRadius: 10
}} />
</Center>
{isWarna.backgroundTotalKegiatan.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
}
</Flex>
</SimpleGrid>
</Flex>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
maxWidth: rem(535),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
@@ -113,4 +167,3 @@ export default function EditPaletteColor() {
</Box>
);
}

32
src/module/color_palette/ui/list_color_palette.tsx
View File

@@ -11,26 +11,26 @@ import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
const paletWarna = [
{
id: 1,
name: 'Palet Bawaan 1',
color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF']
name: 'Tema Bawaan 1',
color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF', '#16ACE3FF', '#532CC1FF']
},
{
id: 2,
name: 'Palet Bawaan 2',
color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF']
name: 'Tema Bawaan 2',
color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF', '#F67280FF', '#C06C84FF']
},
{
id: 3,
name: 'Palet Bawaan 3',
color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF']
name: 'Tema Bawaan 3',
color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF', '#7D8A7DFF', '#0B730BFF']
},
]
const paletTambahan = [
{
id: 1,
name: 'Palet Tambah 1',
color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF']
name: 'Tema Tambah 1',
color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF', '#F67280FF', '#C06C84FF']
}
]
@@ -40,7 +40,7 @@ export default function ListColorPalette() {
const [isOpenTambahan, setOpenTambahan] = useState(false)
return (
<Box>
<LayoutNavbarNew back='/home' title='Palet Warna' menu={
<LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
<ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
@@ -76,13 +76,19 @@ export default function ListColorPalette() {
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[4]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[5]} w={30} h={30} style={{
borderRadius: "100%"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
<Box>
<Text fw={"bold"}>Palet Tambahan</Text>
<Text fw={"bold"}>Tema Tambahan</Text>
{paletTambahan.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
@@ -113,6 +119,12 @@ export default function ListColorPalette() {
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[4]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[5]} w={30} h={30} style={{
borderRadius: "100%"
}} />
</Flex>
</Box>
</Box>