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

fix tamplate ui

Browse Source
This commit is contained in:
Bagasbanuna02
2025-03-06 15:07:49 +08:00
parent 854040ebfa
commit 6a733d89cc
13 changed files with 852 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/dev/(user)/home/page.tsx
View File

@@ -1,9 +1,11 @@
import { HomeViewNew } from "@/app_modules/home";
import { V2_View_Home } from "@/app_modules/home/v2_home_view";
export default async function PageHome() {
return (
<>
<HomeViewNew />
{/* <HomeViewNew /> */}
<V2_View_Home />
</>
);
}

7
src/app/emotion.tsx
View File

@@ -1,4 +1,5 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
// import './globals.css'
import { CacheProvider } from "@emotion/react";
import {
@@ -30,9 +31,13 @@ export default function RootStyleRegistry({
return (
<html lang="en" data-theme="light">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>HIPMI</title>
</head>
<body suppressHydrationWarning={true}>
<body suppressHydrationWarning={true} style={{backgroundColor: MainColor.black}}>
<CacheProvider value={cache}>
<MantineProvider withGlobalStyles withNormalizeCSS>
<Notifications position="top-center" containerWidth={300} />

12
src/app/zCoba/home/page.tsx
View File

@@ -1,17 +1,9 @@
import { Test_Children } from "./test_children";
import Test_FooterHome from "./test_footer";
import Test_LayoutHeaderTamplate from "./test_header";
import { Test_Tamplate } from "./test_tamplate";
import { MobileAppLayout } from "./v2_tamplate";
export default async function Page() {
return (
<>
<Test_Tamplate
header={<Test_LayoutHeaderTamplate title="Test scroll" />}
// footer={<Test_FooterHome />}
>
<Test_Children />
</Test_Tamplate>
<MobileAppLayout />
</>
);
}

26
src/app/zCoba/home/v2_children.tsx Normal file
View File

@@ -0,0 +1,26 @@
"use client";
import { Box, ScrollArea } from "@mantine/core";
export function V2_Children({
children,
height,
}: {
children: React.ReactNode;
height?: number;
}) {
return (
<>
<Box
style={{ zIndex: 0 }}
px={"md"}
h={height ? "82vh" : "92vh"}
pos={"static"}
>
{children}
{/* <ScrollArea h={"100%"} px={"md"} bg={"cyan"}>
</ScrollArea> */}
</Box>
</>
);
}

42
src/app/zCoba/home/v2_header.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import { ActionIcon, Box, Group, Title } from "@mantine/core";
import { IconBell, IconChevronLeft } from "@tabler/icons-react";
export function V2_Header() {
return (
<>
<Box
h={"8vh"}
style={{
zIndex: 10,
alignContent: "center",
}}
w={"100%"}
pos={"sticky"}
top={0}
bg={MainColor.darkblue}
>
<Group h={"100%"} position={"apart"} px={"md"}>
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={MainColor.yellow}>
Test Tamplate
</Title>
<ActionIcon c={"white"} variant="transparent" onClick={() => {}}>
<IconBell />
</ActionIcon>
</Group>
</Box>
</>
);
}

127
src/app/zCoba/home/v2_home_view.tsx Normal file
View File

@@ -0,0 +1,127 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
listMenuHomeBody,
menuHomeJob,
} from "@/app_modules/home/component/list_menu_home";
import {
Box,
Stack,
SimpleGrid,
Paper,
ActionIcon,
Group,
Image,
Text,
} from "@mantine/core";
import { IconUserSearch } from "@tabler/icons-react";
export function V2_HomeView() {
return (
<>
<Box>
<Image
height={140}
fit={"cover"}
alt="logo"
src={"/aset/home/home-hipmi-new.png"}
styles={{
imageWrapper: {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 10px 10px",
},
image: {
borderRadius: "8px 8px 8px 8px",
},
}}
/>
{Array.from(new Array(2)).map((e, i) => (
<Stack my={"sm"} key={i}>
<SimpleGrid cols={2} spacing="md">
{listMenuHomeBody.map((e, i) => (
<Paper
key={e.id}
h={150}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
onClick={() => {}}
>
<Stack align="center" justify="center" h={"100%"}>
<ActionIcon
size={50}
variant="transparent"
c={e.link == "" ? "gray.3" : MainColor.white}
>
{e.icon}
</ActionIcon>
<Text
c={e.link == "" ? "gray.3" : MainColor.white}
fz={"xs"}
>
{e.name}
</Text>
</Stack>
</Paper>
))}
</SimpleGrid>
{/* Job View */}
<Paper
p={"md"}
w={"100%"}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack onClick={() => {}}>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
>
{menuHomeJob.icon}
</ActionIcon>
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
{menuHomeJob.name}
</Text>
</Group>
<SimpleGrid cols={2} spacing="md">
{Array.from({ length: 2 }).map((e, i) => (
<Stack key={i}>
<Group spacing={"xs"}>
<Stack h={"100%"} align="center" justify="flex-start">
<IconUserSearch size={20} color={MainColor.white} />
</Stack>
<Stack spacing={0} w={"60%"}>
<Text
lineClamp={1}
fz={"sm"}
c={MainColor.yellow}
fw={"bold"}
>
nama {i}
</Text>
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
judulnya {i}
</Text>
</Stack>
</Group>
</Stack>
))}
</SimpleGrid>
</Stack>
</Paper>
</Stack>
))}
</Box>
</>
);
}

152
src/app/zCoba/home/v2_tamplate.tsx Normal file
View File

@@ -0,0 +1,152 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
ActionIcon,
Box,
Group,
Image,
Paper,
Text,
Title,
} from "@mantine/core";
import { IconBell, IconChevronLeft, IconUserCircle } from "@tabler/icons-react";
export function MobileAppLayout() {
return (
<Box
style={{
width: "100%",
height: "100vh",
overflow: "hidden",
backgroundColor: MainColor.black,
position: "relative",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
border: "1px solid #ccc", // Garis tepi untuk visualisasi
}}
>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1, // Pastikan background di belakang konten
backgroundImage: "url(/aset/global/main_background.png)",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto",
}}
>
{/* Header */}
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "8vh",
zIndex: 100,
backgroundColor: MainColor.darkblue,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<ActionIcon
c={MainColor.white}
variant="transparent"
radius="xl"
onClick={() => {}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={MainColor.yellow}>
Test Template
</Title>
<ActionIcon c="white" variant="transparent" onClick={() => {}}>
<IconBell />
</ActionIcon>
</Box>
{/* Konten Utama (Bisa Di-scroll) */}
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,
right: 0,
overflowY: "auto", // Bisa di-scroll
padding: "16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{/* Logo */}
<Image
src={"/aset/home/home-hipmi-new.png"}
alt="logo"
height={140}
fit="cover"
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "16px",
}}
/>
{/* Dummy Content untuk Testing Scroll */}
{Array.from({ length: 20 }).map((_, i) => (
<Paper
key={i}
p="md"
bg={MainColor.darkblue}
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "8px",
}}
>
<Text c={MainColor.white}>Item {i + 1}</Text>
</Paper>
))}
</Box>
{/* Footer */}
<Box
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "10vh",
zIndex: 100,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<Group spacing="xl">
<ActionIcon variant="transparent" onClick={() => {}}>
<IconUserCircle color="white" />
</ActionIcon>
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Group>
</Box>
</Box>
</Box>
);
}