wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton color validasi and katalog

Browse Source
This commit is contained in:
nico
2024-12-27 12:06:47 +08:00
parent d8f56309b0
commit b467aedece
17 changed files with 274 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/zCoba/test1/page.tsx
View File

@@ -1,54 +0,0 @@
"use client";
import {
gs_admin_ntf,
gs_realtimeData,
IRealtimeData,
} from "@/app/lib/global_state";
import { Button, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import { WibuRealtime } from "wibu-pkg";
import { v4 } from "uuid";
import { useState } from "react";
const angka = 10;
export default function Page() {
const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
const [adminNtf, setAdminNtf] = useAtom(gs_admin_ntf);
const [notif, setNotif] = useState(angka);
useShallowEffect(() => {
if (adminNtf) {
setNotif((e) => e + 1);
}
}, [adminNtf]);
async function onSend() {
const newData: IRealtimeData = {
appId: v4(),
status: "Publish",
userId: "user1",
pesan: "apa kabar",
title: "coba",
kategoriApp: "INVESTASI",
};
WibuRealtime.setData({
type: "message",
pushNotificationTo: "USER",
dataMessage: newData,
});
}
return (
<Stack p={"md"} align="center" justify="center" h={"80vh"}>
{notif}
<Button
onClick={() => {
onSend();
}}
>
Dari test 1
</Button>
</Stack>
);
}

6
src/app_modules/_global/ui/ui_drawer.tsx
View File

@@ -11,7 +11,7 @@ import {
import { IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { AccentColor } from "../color/color_pallet";
import { AccentColor, MainColor } from "../color/color_pallet";
import ComponentGlobal_Loader from "../component/loader";
interface MODEL_DRAWER {
@@ -72,7 +72,7 @@ export default function UIGlobal_Drawer({
<Stack spacing={"xs"}>
<Group position="right">
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
<IconX color={MainColor.white} />
</ActionIcon>
</Group>
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
@@ -100,7 +100,7 @@ export default function UIGlobal_Drawer({
{e?.icon}
</ActionIcon>
<Text fz={"sm"} align="center" color="white">
<Text fz={"sm"} align="center" color={MainColor.white}>
{e?.name}
</Text>
</Stack>

10
src/app_modules/auth/login/view.tsx
View File

@@ -56,15 +56,19 @@ export default function Login({ version }: { version: string }) {
<UIGlobal_LayoutDefault>
<Stack align="center" justify="center" h={"100vh"} spacing={100}>
<Stack align="center" spacing={0}>
<Title order={3} c={MainColor.yellow}>
<Title order={3} c={MainColor.yellow} >
WELCOME TO
</Title>
<Title c={MainColor.yellow}>HIPMI APPS</Title>
<Title c={MainColor.yellow} >
HIPMI APPS
</Title>
</Stack>
<Stack w={300}>
<Center>
<Text c={MainColor.white}>Nomor telepon</Text>
<Text c={MainColor.white} >
Nomor telepon
</Text>
</Center>
<PhoneInput
inputStyle={{ width: "100%" }}

55
src/app_modules/auth/validasi/skeleton.tsx
View File

@@ -1,24 +1,24 @@
import { Stack, Skeleton, Group } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Group, Skeleton, Stack } from "@mantine/core";
export default function Validasi_SkeletonView() {
return (
<Stack align="center" justify="center" h={"100vh"} spacing={50}>
<Skeleton h={30} w={250} radius={"xl"} />
<CustomSkeleton h={30} w={250} radius={"xl"} />
<Stack spacing={"md"} align="center">
<Stack mb={15}>
<Skeleton h={20} w={250} radius={"xl"} />
<Skeleton h={20} w={250} radius={"xl"} />
</Stack>
<Group mb={10}>
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} h={50} w={50} radius={"sm"} />
))}
</Group>
<Skeleton h={20} w={250} radius={"xl"} />
<Stack mb={15}>
<CustomSkeleton h={20} w={250} radius={"xl"} />
<CustomSkeleton h={20} w={250} radius={"xl"} />
</Stack>
<Skeleton h={50} w={250} radius={"sm"} />
<Group mb={10}>
{Array.from({ length: 4 }).map((_, i) => (
<CustomSkeleton key={i} h={50} w={50} radius={"sm"} />
))}
</Group>
<CustomSkeleton h={20} w={250} radius={"xl"} />
</Stack>
<CustomSkeleton h={50} w={250} radius={"sm"} />
</Stack>
);
}
@@ -39,3 +39,28 @@ export default function Validasi_SkeletonView() {
<Skeleton h={50} w={250} radius={"sm"} />
</Stack> */}
// import { Stack, Skeleton, Group } from "@mantine/core";
// export default function Validasi_SkeletonView() {
// return (
// <Stack align="center" justify="center" h={"100vh"} spacing={50}>
// <Skeleton h={30} w={250} radius={"xl"} />
// <Stack spacing={"md"} align="center">
// <Stack mb={15}>
// <Skeleton h={20} w={250} radius={"xl"} />
// <Skeleton h={20} w={250} radius={"xl"} />
// </Stack>
// <Group mb={10}>
// {Array.from({ length: 4 }).map((_, i) => (
// <Skeleton key={i} h={50} w={50} radius={"sm"} />
// ))}
// </Group>
// <Skeleton h={20} w={250} radius={"xl"} />
// </Stack>
// <Skeleton h={50} w={250} radius={"sm"} />
// </Stack>
// );
// }

35
src/app_modules/components/CustomSkeleton.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Skeleton, SkeletonProps, createStyles } from '@mantine/core';
import { AccentColor } from '../_global/color';
interface CustomSkeletonProps extends SkeletonProps {
isLoading?: boolean;
className?: string;
}
const useStyles = createStyles((theme) => ({
skeleton: {
'&::before': {
backgroundColor: "#1F5B9E",
},
'&::after': {
backgroundColor: "#0F3055",
},
},
}));
const CustomSkeleton: React.FC<CustomSkeletonProps> = ({
isLoading = true,
className,
...props
}) => {
const { classes, cx } = useStyles();
return (
<Skeleton
className={cx(classes.skeleton, className)}
visible={isLoading}
{...props}
/>
);
};
export default CustomSkeleton;

9
src/app_modules/event/component/skeleton/comp_skeleton_beranda.tsx
View File

@@ -1,5 +1,6 @@
import { AccentColor } from "@/app_modules/_global/color";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Grid, Group, Paper, Skeleton, Stack, Text } from "@mantine/core";
export default function Event_ComponentSkeletonBeranda() {
@@ -10,16 +11,16 @@ export default function Event_ComponentSkeletonBeranda() {
<Stack>
<Grid align="center">
<Grid.Col span={"content"}>
<Skeleton radius={"100%"} h={50} w={50} />
<CustomSkeleton radius={"100%"} h={50} w={50} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Skeleton h={20} w={"50%"} />
<CustomSkeleton h={20} w={"50%"} />
</Grid.Col>
</Grid>
<Stack>
<Skeleton h={20} w={"100%"} />
<Skeleton h={20} w={"100%"} />
<CustomSkeleton h={20} w={"100%"} />
<CustomSkeleton h={20} w={"100%"} />
</Stack>
</Stack>
</ComponentGlobal_CardStyles>

3
src/app_modules/katalog/portofolio/component/button_delete_new.tsx
View File

@@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiDeletePortofolio, apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentPortofolio_ButtonDeleteNew() {
const param = useParams<{ id: string }>()
@@ -59,7 +60,7 @@ export default function ComponentPortofolio_ButtonDeleteNew() {
{userLoginId === dataPorto?.authorId ? (
<Button
radius={"xl"}
bg={"red"}
bg={MainColor.red}
color="red"
onClick={() => {
setModal(true)

23
src/app_modules/katalog/portofolio/component/button_more_new.tsx
View File

@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentPortofolio_ButtonMoreNew() {
const param = useParams<{ id: string }>()
@@ -20,31 +21,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
{
id: "1",
name: "Edit detail ",
icon: <IconEdit />,
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit />,
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId />,
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 />,
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.edit + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin />,
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
@@ -53,31 +54,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
{
id: "1",
name: "Edit detail ",
icon: <IconEdit />,
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit />,
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId />,
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 />,
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.create + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin />,
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
@@ -107,7 +108,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
<>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color="white" />
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>

40
src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx
View File

@@ -37,8 +37,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.namaBisnis}
@@ -62,8 +68,14 @@ export default function Portofolio_EditDataBisnis({
<Select
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.MasterBidangBisnis.id}
@@ -85,8 +97,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.alamatKantor}
@@ -110,8 +128,14 @@ export default function Portofolio_EditDataBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
withAsterisk
value={value.tlpn}
@@ -137,8 +161,14 @@ export default function Portofolio_EditDataBisnis({
<Textarea
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
autosize
minRows={2}

42
src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
View File

@@ -34,15 +34,21 @@ export default function Portofolio_EditMedsosBisnis({
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Stack px={"sm"}>
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Facebook"
value={medsos.facebook}
@@ -57,8 +63,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Instagram"
value={medsos.instagram}
@@ -73,8 +85,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Tiktok"
value={medsos.tiktok}
@@ -89,8 +107,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Twitter"
value={medsos.twitter}
@@ -105,8 +129,14 @@ export default function Portofolio_EditMedsosBisnis({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white
},
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red
}
}}
label="Youtube"
value={medsos.youtube}

14
src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
View File

@@ -1,12 +1,12 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { Paper, Stack, Group, Title, SimpleGrid, Box, Grid, Divider, Text } from "@mantine/core";
import { IconBuildingSkyscraper, IconListDetails, IconPhoneCall, IconMapPin, IconPinned } from "@tabler/icons-react";
import { useState } from "react";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import { useParams } from "next/navigation";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconPinned } from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis";
export default function Portofolio_UiDetailDataNew() {
@@ -41,7 +41,7 @@ export default function Portofolio_UiDetailDataNew() {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
{

17
src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx
View File

@@ -1,16 +1,17 @@
import { APIs } from "@/app/lib";
import { AccentColor } from "@/app_modules/_global/color";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
import { Paper, Stack, Title, Avatar, Skeleton, Text } from "@mantine/core";
import { Avatar, Paper, Stack, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import "mapbox-gl/dist/mapbox-gl.css";
import { useParams } from "next/navigation";
import { useState } from "react";
import { AttributionControl, Map, Marker, NavigationControl, ScaleControl, } from "react-map-gl";
import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { useShallowEffect } from "@mantine/hooks";
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: string }) {
const [loading, setLoading] = useState(true)
@@ -46,7 +47,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Stack spacing={0}>
@@ -55,7 +56,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
</Title>
{
loading ?
<Skeleton radius={"md"} w={"100%"} h={100} />
<CustomSkeleton radius={"md"} w={"100%"} h={100} />
:
dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />

15
src/app_modules/katalog/portofolio/ui/ui_detail_media_new.tsx
View File

@@ -1,11 +1,12 @@
import { AccentColor } from "@/app_modules/_global/color";
import { Paper, Title, Stack, Grid, Text, Skeleton, Box } from "@mantine/core";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid, Paper, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTiktok, IconBrandTwitter, IconBrandYoutube } from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
export default function Portofolio_UiSosialMediaNew() {
const [loading, setLoading] = useState(true)
@@ -40,7 +41,7 @@ export default function Portofolio_UiSosialMediaNew() {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
color: MainColor.white,
}}
>
<Title order={6}>Media Sosial Bisnis</Title>
@@ -51,10 +52,10 @@ export default function Portofolio_UiSosialMediaNew() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={1}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25} />
</Grid.Col>
<Grid.Col span={11}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>

23
src/app_modules/katalog/portofolio/ui/ui_skeleton_detail_bisnis.tsx
View File

@@ -1,3 +1,4 @@
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
export default function SkeletonDetailBisnis() {
@@ -5,7 +6,15 @@ export default function SkeletonDetailBisnis() {
<Box>
<Grid>
<Grid.Col span={6}>
<Skeleton w={"100%"} height={200} radius="md" />
<CustomSkeleton w={"60%"} height={15} radius="md" />
</Grid.Col>
<Grid.Col span={6}>
<CustomSkeleton w={"100%"} height={15} radius="md" />
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<CustomSkeleton w={"100%"} height={200} radius="md" />
</Grid.Col>
<Grid.Col span={6}>
<Box>
@@ -13,10 +22,10 @@ export default function SkeletonDetailBisnis() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={2}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25} />
</Grid.Col>
<Grid.Col span={10}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>
@@ -25,10 +34,10 @@ export default function SkeletonDetailBisnis() {
</Grid.Col>
</Grid>
<Box mt={"md"}>
<Skeleton w={"30%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<Skeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"30%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
<CustomSkeleton w={"95%"} h={15} my={10} />
</Box>
</Box>
</>;

5
src/app_modules/katalog/ui/list_portolio_new.tsx
View File

@@ -7,6 +7,7 @@ import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { IconCaretRight } from "@tabler/icons-react";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function ListPortofolioProfileNew() {
const router = useRouter();
@@ -58,8 +59,8 @@ export default function ListPortofolioProfileNew() {
{
loading ?
<>
<Skeleton height={70} radius={"md"} width={"100%"} />
<Skeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
</>
:

63
src/app_modules/katalog/ui/skeleton_profile.tsx
View File

@@ -1,10 +1,11 @@
import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
export default function SkeletonProfile() {
return (
<>
<Box mb={"lg"}>
<Skeleton height={200} radius={"md"} />
<CustomSkeleton height={200} radius={"md"} />
<Box
sx={{
position: "relative",
@@ -14,12 +15,12 @@ export default function SkeletonProfile() {
}}
>
<Center>
<Avatar radius={"50%"} size={100} />
<CustomSkeleton circle height={100} width={100} />
</Center>
</Box>
<Stack align="center" justify="center" spacing={"xs"}>
<Skeleton height={15} radius={"md"} width={"50%"} />
<Skeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"}/>
</Stack>
<Box mt={"lg"}>
@@ -28,10 +29,10 @@ export default function SkeletonProfile() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={1}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25}/>
</Grid.Col>
<Grid.Col span={11}>
<Skeleton w={"50%"} h={15} />
<CustomSkeleton w={"50%"} h={15}/>
</Grid.Col>
</Grid>
</Box>
@@ -40,5 +41,49 @@ export default function SkeletonProfile() {
</Box>
</Box>
</>
)
}
);
}
// import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
// export default function SkeletonProfile() {
// return (
// <>
// <Box mb={"lg"}>
// <Skeleton height={200} radius={"md"} />
// <Box
// sx={{
// position: "relative",
// bottom: 60,
// width: "100%",
// marginBottom: -30,
// }}
// >
// <Center>
// <Avatar radius={"50%"} size={100} />
// </Center>
// </Box>
// <Stack align="center" justify="center" spacing={"xs"}>
// <Skeleton height={15} radius={"md"} width={"50%"} />
// <Skeleton height={15} radius={"md"} width={"50%"} />
// </Stack>
// <Box mt={"lg"}>
// <Stack spacing={"xs"}>
// {[...Array(4)].map((_, index) => (
// <Box key={index} py={5}>
// <Grid align="center">
// <Grid.Col span={1}>
// <Skeleton w={25} h={25} />
// </Grid.Col>
// <Grid.Col span={11}>
// <Skeleton w={"50%"} h={15} />
// </Grid.Col>
// </Grid>
// </Box>
// ))}
// </Stack>
// </Box>
// </Box>
// </>
// )
// }

4
src/app_modules/map/ui/ui_edit_map.tsx
View File

@@ -114,8 +114,8 @@ export function UiMap_EditMap({
}}
>
<TextInput
style={{ transition: "0.5s" }}
styles={{ label: { color: "white" } }}
style={{ transition: "0.5s", }}
styles={{ label: { color: MainColor.white }, required: { color: MainColor.red }, input: { backgroundColor: MainColor.white } }}
label="Nama Pin"
placeholder="Masukan nama pin map"
value={data.namePin}