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

10
src/module/home/ui/carosole.tsx
View File

@@ -1,11 +1,13 @@
'use client'
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
import { useHookstate } from '@hookstate/core';
export default function Carosole() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
const tema = useHookstate(TEMA)
return (
<>
<Carousel
@@ -15,17 +17,17 @@ export default function Carosole() {
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Carousel.Slide bg={tema.get().utama} 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 }}>
<Carousel.Slide bg={tema.get().utama} 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 }}>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>

6
src/module/home/ui/chart_document.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Box } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { EChartsOption } from "echarts";
@@ -7,12 +7,14 @@ import EChartsReact from "echarts-for-react";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetHome } from "../lib/api_home";
import { useHookstate } from "@hookstate/core";
export default function ChartDocumentHome() {
const [options, setOptions] = useState<EChartsOption>({})
const [isData, setData] = useState<any[]>([])
const [loading, setLoading] = useState(true)
const color = ["#F3C96B", "#9EC97F", "#5971C0"]
const tema = useHookstate(TEMA)
useShallowEffect(() => {
fetchData()
@@ -48,7 +50,7 @@ export default function ChartDocumentHome() {
top: '2%',
left: 'center',
textStyle: {
color: WARNA.biruTua
color: tema.get().utama
}
},
tooltip: {

7
src/module/home/ui/chart_progress_tugas.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Box, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { EChartsOption } from "echarts";
@@ -7,12 +7,13 @@ import EChartsReact from "echarts-for-react";
import { useState } from "react";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useHookstate } from "@hookstate/core";
export default function ChartProgressHome() {
const [options, setOptions] = useState<EChartsOption>({});
const [isData, setData] = useState<any[]>([])
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
useShallowEffect(() => {
fetchData()
}, [])
@@ -47,7 +48,7 @@ export default function ChartProgressHome() {
top: '2%',
left: 'center',
textStyle: {
color: WARNA.biruTua
color: tema.get().utama
}
},
legend: {

38
src/module/home/ui/features.tsx
View File

@@ -1,5 +1,6 @@
'use client'
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
@@ -9,10 +10,11 @@ import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2
export default function Features() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text>
<SimpleGrid
cols={{ base: 4, sm: 4, lg: 4 }}
>
@@ -22,12 +24,14 @@ export default function Features() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniUserGroup size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Divisi</Text>
</Center>
</Box>
<Box onClick={() => router.push('/project?status=0&group=null')}>
@@ -36,12 +40,14 @@ export default function Features() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>
@@ -50,12 +56,14 @@ export default function Features() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMegaphone size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Pengumuman</Text>
</Center>
</Box>
<Box onClick={() => router.push('/home?cat=fitur')}>
@@ -64,12 +72,14 @@ export default function Features() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiSquares2X2 size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Semua</Text>
</Center>
</Box>
</SimpleGrid>

10
src/module/home/ui/icon_navbar.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Group, Indicator, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
@@ -7,18 +8,19 @@ import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2
export default function IconNavbar() {
const router = useRouter()
const tema = useHookstate(TEMA)
return (
<Box>
<Group>
<ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>
<Indicator inline label={"9"} size={18} color={"red"} offset={3}>
<ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineBell size={20} color='white' />
</ActionIcon>
</Indicator>
<ActionIcon onClick={() => router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => router.push('/profile')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineUser size={20} color='white' />
</ActionIcon>
</Group>

6
src/module/home/ui/list_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Box, Grid, Group, SimpleGrid, Skeleton, Text } from "@mantine/core";
import { GoDiscussionClosed } from "react-icons/go";
import { CiClock2, CiUser } from "react-icons/ci";
@@ -10,6 +10,7 @@ import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussion() {
@@ -17,6 +18,7 @@ export default function ListDiscussion() {
const [isData, setData] = useState<IDataHomeDiskusi[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -45,7 +47,7 @@ export default function ListDiscussion() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,

10
src/module/home/ui/list_divisi.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Skeleton } from "@mantine/core";
import _ from "lodash";
@@ -9,11 +9,13 @@ import { IDataHomeDivision } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
export default function ListDivisi() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeDivision[]>([])
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -44,7 +46,7 @@ export default function ListDivisi() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
{loading ?
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
@@ -62,9 +64,9 @@ export default function ListDivisi() {
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Box h={120} bg={tema.get().bgFiturHome}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={WARNA.biruTua} ta={"center"} lineClamp={2}>{v.name}</Title>
<Title order={3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>

6
src/module/home/ui/list_event.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global"
import { TEMA, WARNA } from "@/module/_global"
import { Box, Divider, Flex, Group, Skeleton, Text } from "@mantine/core"
import { useRouter } from "next/navigation"
import { useState } from "react"
@@ -8,6 +8,7 @@ import { funGetHome } from "../lib/api_home"
import toast from "react-hot-toast"
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
import _ from "lodash"
import { useHookstate } from "@hookstate/core"
export default function ListEventHome() {
@@ -15,6 +16,7 @@ export default function ListEventHome() {
const [isData, setData] = useState<IDataHomeEvent[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -43,7 +45,7 @@ export default function ListEventHome() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Acara Hari Ini</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Acara Hari Ini</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,

8
src/module/home/ui/list_notification.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
@@ -67,18 +68,19 @@ const dataNotification = [
export default function ListNotification() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
return (
<Box>
{dataNotification.map((v, i) => {
return (
<Box key={i} my={15}>
<Box style={{
border: `1px solid ${WARNA.borderOrange}`,
border: `1px solid ${tema.get().utama}`,
padding: 20,
borderRadius: 15
}} >
<Group align='center'>
<ActionIcon variant="light" bg={WARNA.biruTua} size={35} radius={100} aria-label="icon">
<ActionIcon variant="light" bg={tema.get().utama} size={35} radius={100} aria-label="icon">
<FaBell size={20} color='white' />
</ActionIcon>
<Box

10
src/module/home/ui/list_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -9,11 +9,13 @@ import toast from "react-hot-toast";
import { funGetHome } from "../lib/api_home";
import { IDataHomeKegiatan } from "../lib/type_home";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListProjects() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeKegiatan[]>([])
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -43,7 +45,7 @@ export default function ListProjects() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
{loading ?
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
@@ -61,7 +63,7 @@ export default function ListProjects() {
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Box h={120} bg={tema.get().utama}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex>
@@ -73,7 +75,7 @@ export default function ListProjects() {
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={WARNA.biruTua}>{v.createdAt}</Text>
<Text c={tema.get().utama}>{v.createdAt}</Text>
</Stack>
</Card>
</Box>

59
src/module/home/ui/view_detail_feature.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutNavbarNew, WARNA } from '@/module/_global';
import { globalRole, LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
@@ -14,6 +14,7 @@ export default function ViewDetailFeature() {
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -28,12 +29,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniUserGroup size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text>
<Text fz={15} c={tema.get().utama}>Divisi</Text>
</Center>
</Box>
<Box onClick={() => router.push('/project?status=0&group=null')}>
@@ -42,12 +45,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
<Text fz={15} c={tema.get().utama}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>
@@ -56,12 +61,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMegaphone size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
<Text fz={15} c={tema.get().utama}>Pengumuman</Text>
</Center>
</Box>
<Box onClick={() => router.push('/member')}>
@@ -70,12 +77,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<PiUsersFourFill size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Anggota</Text>
<Text fz={15} c={tema.get().utama}>Anggota</Text>
</Center>
</Box>
<Box onClick={() => router.push('/position')}>
@@ -84,12 +93,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<FaUserTie size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Jabatan</Text>
<Text fz={15} c={tema.get().utama}>Jabatan</Text>
</Center>
</Box>
{
@@ -100,12 +111,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<FaUserTag size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Grup</Text>
<Text fz={15} c={tema.get().utama}>Grup</Text>
</Center>
</Box>
}
@@ -117,12 +130,14 @@ export default function ViewDetailFeature() {
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<IoColorPalette size={isMobile ? 25 : 35} color={WARNA.biruTua} />
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<IoColorPalette size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Palet Warna</Text>
<Text fz={15} c={tema.get().utama}>Tema</Text>
</Center>
</Box>
}

8
src/module/home/ui/view_home.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarHome, WARNA } from '@/module/_global';
import { LayoutNavbarHome, TEMA, WARNA } from '@/module/_global';
import { Box, Group, Notification, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import Carosole from './carosole';
@@ -15,15 +15,17 @@ import { useShallowEffect } from '@mantine/hooks';
import { notifications, Notifications } from '@mantine/notifications';
import { IoNotifications } from 'react-icons/io5';
import { ImCheckboxUnchecked } from 'react-icons/im';
import { useHookstate } from '@hookstate/core';
export default function ViewHome() {
const [isNotif, setIsNotif] = useState(true);
const tema = useHookstate(TEMA)
useShallowEffect(() => {
if (isNotif) {
notifications.show({
color: WARNA.biruTua,
color: tema.get().utama,
title: <Text lineClamp={1}>Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
message: <Text lineClamp={1}>Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
icon: <IoNotifications/>,
@@ -33,7 +35,7 @@ export default function ViewHome() {
radius: 'lg',
bg: "white",
style: {
border: `1px solid #0A8072FF`,
border: `1px solid ${tema.get().utama}`,
},
onClose: () => setIsNotif(false)
});

20
src/module/home/ui/view_search.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup } from 'react-icons/hi2';
@@ -8,6 +8,7 @@ import { useShallowEffect } from '@mantine/hooks';
import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search';
import { useRouter } from 'next/navigation';
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
export default function ViewSearch() {
const [search, setSearch] = useState('');
@@ -15,6 +16,7 @@ export default function ViewSearch() {
const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
const router = useRouter()
const tema = useHookstate(TEMA)
async function featchSearch() {
try {
@@ -45,9 +47,9 @@ export default function ViewSearch() {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
size="md"
@@ -89,7 +91,7 @@ export default function ViewSearch() {
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
</Grid.Col>
<Grid.Col span={9}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Grid.Col>
</Grid>
@@ -121,7 +123,7 @@ export default function ViewSearch() {
<Box key={i} onClick={() => router.push(`/division/${v.id}`)}>
<Grid justify='center' align='center' mt={15} >
<Grid.Col span={2}>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
<HiMiniUserGroup color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
@@ -132,7 +134,7 @@ export default function ViewSearch() {
xl: 380
}}
>
<Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.name.toUpperCase()}</Text>
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.name.toUpperCase()}</Text>
</Box>
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
</Grid.Col>
@@ -165,7 +167,7 @@ export default function ViewSearch() {
<Box key={i} onClick={() => router.push(`/project/${v.id}`)}>
<Grid justify='center' align='center' mt={10}>
<Grid.Col span={2}>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
<HiMiniPresentationChartBar color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
@@ -176,7 +178,7 @@ export default function ViewSearch() {
xl: 380
}}
>
<Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title.toUpperCase()}</Text>
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title.toUpperCase()}</Text>
</Box>
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
</Grid.Col>