From 2a56baa611e13f256d0e9ff429f9ea764ce0c5a1 Mon Sep 17 00:00:00 2001 From: lukman Date: Thu, 12 Sep 2024 13:31:47 +0800 Subject: [PATCH] style : tema --- .../color-palette/create/page.tsx | 10 ++ src/app/(application)/color-palette/page.tsx | 10 ++ .../color-palette/update/[id]/page.tsx | 10 ++ src/module/color_palette/index.ts | 7 + src/module/color_palette/lib/.gitkeep | 0 .../color_palette/ui/create_palette_color.tsx | 115 +++++++++++++++ .../ui/drawer_create_palette.tsx | 27 ++++ .../ui/drawer_palet_edit_end_default.tsx | 49 +++++++ .../color_palette/ui/edit_palette_color.tsx | 116 +++++++++++++++ .../color_palette/ui/list_color_palette.tsx | 132 ++++++++++++++++++ src/module/home/ui/view_detail_feature.tsx | 18 +++ 11 files changed, 494 insertions(+) create mode 100644 src/app/(application)/color-palette/create/page.tsx create mode 100644 src/app/(application)/color-palette/page.tsx create mode 100644 src/app/(application)/color-palette/update/[id]/page.tsx create mode 100644 src/module/color_palette/index.ts create mode 100644 src/module/color_palette/lib/.gitkeep create mode 100644 src/module/color_palette/ui/create_palette_color.tsx create mode 100644 src/module/color_palette/ui/drawer_create_palette.tsx create mode 100644 src/module/color_palette/ui/drawer_palet_edit_end_default.tsx create mode 100644 src/module/color_palette/ui/edit_palette_color.tsx create mode 100644 src/module/color_palette/ui/list_color_palette.tsx diff --git a/src/app/(application)/color-palette/create/page.tsx b/src/app/(application)/color-palette/create/page.tsx new file mode 100644 index 0000000..747668e --- /dev/null +++ b/src/app/(application)/color-palette/create/page.tsx @@ -0,0 +1,10 @@ +import { CreatePaletteColor } from '@/module/color_palette'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/app/(application)/color-palette/page.tsx b/src/app/(application)/color-palette/page.tsx new file mode 100644 index 0000000..452f04c --- /dev/null +++ b/src/app/(application)/color-palette/page.tsx @@ -0,0 +1,10 @@ +import { ListColorPalette } from '@/module/color_palette'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/app/(application)/color-palette/update/[id]/page.tsx b/src/app/(application)/color-palette/update/[id]/page.tsx new file mode 100644 index 0000000..946e8cb --- /dev/null +++ b/src/app/(application)/color-palette/update/[id]/page.tsx @@ -0,0 +1,10 @@ +import { EditPaletteColor } from '@/module/color_palette'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/module/color_palette/index.ts b/src/module/color_palette/index.ts new file mode 100644 index 0000000..9a0d5d4 --- /dev/null +++ b/src/module/color_palette/index.ts @@ -0,0 +1,7 @@ +import CreatePaletteColor from "./ui/create_palette_color"; +import EditPaletteColor from "./ui/edit_palette_color"; +import ListColorPalette from "./ui/list_color_palette"; + +export { ListColorPalette } +export { CreatePaletteColor } +export { EditPaletteColor } \ No newline at end of file diff --git a/src/module/color_palette/lib/.gitkeep b/src/module/color_palette/lib/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx new file mode 100644 index 0000000..45f6ab8 --- /dev/null +++ b/src/module/color_palette/ui/create_palette_color.tsx @@ -0,0 +1,115 @@ +"use client" +import { LayoutNavbarNew, WARNA } from '@/module/_global'; +import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core'; +import React, { useState } from 'react'; + +export default function CreatePaletteColor() { + const [isWarna, setWarna] = useState({ + warnaSatu: '', + warnaDua: '', + warnaTiga: '', + warnaEmpat: '', + + }) + return ( + + + + + setWarna({ ...isWarna, warnaSatu: color }) + } + /> + setWarna({ ...isWarna, warnaDua: color }) + } + /> + setWarna({ ...isWarna, warnaTiga: color }) + } + /> + setWarna({ ...isWarna, warnaEmpat: color }) + } + /> + + + +
+ +
+ {isWarna.warnaSatu.length == 0 ? "" : + {isWarna.warnaSatu} + } + + + + {isWarna.warnaDua.length == 0 ? "" : + {isWarna.warnaDua} + } + + + + {isWarna.warnaTiga.length == 0 ? "" : + {isWarna.warnaTiga} + } + + + + {isWarna.warnaEmpat.length == 0 ? "" : + {isWarna.warnaEmpat} + } + + + + + + + + ); +} diff --git a/src/module/color_palette/ui/drawer_create_palette.tsx b/src/module/color_palette/ui/drawer_create_palette.tsx new file mode 100644 index 0000000..af040cf --- /dev/null +++ b/src/module/color_palette/ui/drawer_create_palette.tsx @@ -0,0 +1,27 @@ +import { WARNA } from '@/module/_global'; +import { Box, Flex, SimpleGrid, Text } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import React from 'react'; +import { IoAddCircle } from 'react-icons/io5'; + +export default function DrawerCreatePalette() { + const router = useRouter() + return ( + + + router.push('/color-palette/create')} + > + + + + + Tambah Palet + + + + + ); +} diff --git a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx new file mode 100644 index 0000000..0783be1 --- /dev/null +++ b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx @@ -0,0 +1,49 @@ +import { WARNA } from '@/module/_global'; +import LayoutModal from '@/module/_global/layout/layout_modal'; +import { Box, Flex, SimpleGrid, Text } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import React, { useState } from 'react'; +import { FaPencil } from 'react-icons/fa6'; +import { IoAddCircle, IoColorPalette } from 'react-icons/io5'; + +export default function DrawerPaletEditEndDefault() { + const router = useRouter() + const [isModal, setModal] = useState(false) + + function onCLose(val: boolean) { + setModal(false) + } + return ( + + + setModal(true)} + > + + + + + Default Warna + + + router.push('/color-palette/update/1')} + > + + + + + Edit Palet + + + + + setModal(false)} + description="Apakah Anda yakin ingin mengubah warna Aplikasi?" + onYes={(val) => { onCLose(val) }} /> + + ); +} + diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx new file mode 100644 index 0000000..24f1707 --- /dev/null +++ b/src/module/color_palette/ui/edit_palette_color.tsx @@ -0,0 +1,116 @@ +"use client" +import { LayoutNavbarNew, WARNA } from '@/module/_global'; +import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core'; +import React, { useState } from 'react'; + +export default function EditPaletteColor() { + const [isWarna, setWarna] = useState({ + warnaSatu: '', + warnaDua: '', + warnaTiga: '', + warnaEmpat: '', + + }) + return ( + + + + + setWarna({ ...isWarna, warnaSatu: color }) + } + /> + setWarna({ ...isWarna, warnaDua: color }) + } + /> + setWarna({ ...isWarna, warnaTiga: color }) + } + /> + setWarna({ ...isWarna, warnaEmpat: color }) + } + /> + + + +
+ +
+ {isWarna.warnaSatu.length == 0 ? "" : + {isWarna.warnaSatu} + } + + + + {isWarna.warnaDua.length == 0 ? "" : + {isWarna.warnaDua} + } + + + + {isWarna.warnaTiga.length == 0 ? "" : + {isWarna.warnaTiga} + } + + + + {isWarna.warnaEmpat.length == 0 ? "" : + {isWarna.warnaEmpat} + } + + + + + + + + ); +} + diff --git a/src/module/color_palette/ui/list_color_palette.tsx b/src/module/color_palette/ui/list_color_palette.tsx new file mode 100644 index 0000000..7adf74b --- /dev/null +++ b/src/module/color_palette/ui/list_color_palette.tsx @@ -0,0 +1,132 @@ +"use client" +import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; +import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import React, { useState } from 'react'; +import { FaCircleCheck } from 'react-icons/fa6'; +import { HiMenu } from 'react-icons/hi'; +import DrawerCreatePalette from './drawer_create_palette'; +import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default'; + +const paletWarna = [ + { + id: 1, + name: 'Palet Bawaan 1', + color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF'] + }, + { + id: 2, + name: 'Palet Bawaan 2', + color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF'] + }, + { + id: 3, + name: 'Palet Bawaan 3', + color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF'] + }, +] + +const paletTambahan = [ + { + id: 1, + name: 'Palet Tambah 1', + color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF'] + } +] + +export default function ListColorPalette() { + const router = useRouter() + const [isOpen, setOpen] = useState(false) + const [isOpenTambahan, setOpenTambahan] = useState(false) + return ( + + { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + } /> + + {paletWarna.map((v, i) => ( + + { setOpenTambahan(true) }} + > + + {v.name} + + + + + + + + + + + + + ))} + + Palet Tambahan + {paletTambahan.map((v, i) => ( + + { setOpenTambahan(true) }} + > + + {v.name} + + + + + + + + + + + + + ))} + + + setOpen(false)}> + + + + setOpenTambahan(false)}> + + + + ); +} diff --git a/src/module/home/ui/view_detail_feature.tsx b/src/module/home/ui/view_detail_feature.tsx index 7661746..61375d0 100644 --- a/src/module/home/ui/view_detail_feature.tsx +++ b/src/module/home/ui/view_detail_feature.tsx @@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation'; import { FaUserTag, FaUserTie } from 'react-icons/fa6'; import { useHookstate } from '@hookstate/core'; import { useMediaQuery } from '@mantine/hooks'; +import { IoColorPalette, IoColorPaletteOutline } from 'react-icons/io5'; export default function ViewDetailFeature() { const router = useRouter() @@ -108,6 +109,23 @@ export default function ViewDetailFeature() { } + { + roleLogin.get() == "supadmin" && + router.push('/color-palette')}> +
+ + + +
+
+ Palet Warna +
+ + }