fix ui tamplate
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { HomeViewNew } from "@/app_modules/home";
|
||||
import { V2_View_Home } from "@/app_modules/home/v2_home_view";
|
||||
import { V3_View_Home } from "@/app_modules/home/v3_home_view";
|
||||
|
||||
export default async function PageHome() {
|
||||
return (
|
||||
<>
|
||||
{/* <HomeViewNew /> */}
|
||||
<V2_View_Home />
|
||||
{/* <V2_View_Home /> */}
|
||||
<V3_View_Home />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,10 +2,7 @@
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
// import './globals.css'
|
||||
import { CacheProvider } from "@emotion/react";
|
||||
import {
|
||||
MantineProvider,
|
||||
useEmotionCache
|
||||
} from "@mantine/core";
|
||||
import { MantineProvider, useEmotionCache } from "@mantine/core";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import { Provider } from "jotai";
|
||||
import { useServerInsertedHTML } from "next/navigation";
|
||||
@@ -33,11 +30,14 @@ export default function RootStyleRegistry({
|
||||
<head>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<title>HIPMI</title>
|
||||
</head>
|
||||
<body suppressHydrationWarning={true} style={{backgroundColor: MainColor.black}}>
|
||||
<body
|
||||
suppressHydrationWarning={true}
|
||||
style={{ backgroundColor: MainColor.black }}
|
||||
>
|
||||
<CacheProvider value={cache}>
|
||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||
<Notifications position="top-center" containerWidth={300} />
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { MobileAppLayout } from "./v2_tamplate";
|
||||
import ClientLayout from "./v2_coba_tamplate";
|
||||
import ViewV2 from "./v2_view";
|
||||
|
||||
export default async function Page() {
|
||||
return (
|
||||
<>
|
||||
<MobileAppLayout />
|
||||
<ViewV2 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
159
src/app/zCoba/home/v2_coba_tamplate.tsx
Normal file
159
src/app/zCoba/home/v2_coba_tamplate.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
ActionIcon,
|
||||
BackgroundImage, // Import BackgroundImage dari Mantine
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { createStyles } from "@mantine/styles";
|
||||
import { IconBell, IconSearch } from "@tabler/icons-react";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
|
||||
// Styling langsung didefinisikan di dalam komponen
|
||||
const useStyles = createStyles((theme) => ({
|
||||
pageContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: "100dvh", // dynamic viewport height untuk mobile
|
||||
width: "100%",
|
||||
maxWidth: "500px", // Batasi lebar maksimum
|
||||
margin: "0 auto", // Pusatkan layout
|
||||
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like
|
||||
backgroundColor: MainColor.darkblue, // Warna latar belakang fallback
|
||||
|
||||
[`@media (max-width: 768px)`]: {
|
||||
maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh
|
||||
boxShadow: "none", // Hilangkan shadow pada mobile
|
||||
},
|
||||
},
|
||||
|
||||
header: {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
width: "100%",
|
||||
maxWidth: "500px", // Batasi lebar header sesuai container
|
||||
margin: "0 auto", // Pusatkan header
|
||||
backgroundColor: MainColor.darkblue,
|
||||
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
|
||||
zIndex: 1000, // Pastikan z-index tinggi
|
||||
transition: "all 0.3s ease",
|
||||
color: MainColor.yellow,
|
||||
},
|
||||
|
||||
scrolled: {
|
||||
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
|
||||
},
|
||||
|
||||
headerContainer: {
|
||||
height: "8vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0 16px", // Padding untuk mobile view
|
||||
|
||||
[`@media (max-width: 768px)`]: {
|
||||
height: "8vh",
|
||||
},
|
||||
borderBottom: `1px solid ${AccentColor.blue}`,
|
||||
borderBottomLeftRadius: "10px",
|
||||
borderBottomRightRadius: "10px",
|
||||
},
|
||||
|
||||
content: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
overflowY: "auto", // Izinkan scrolling pada konten
|
||||
paddingBottom: "15vh", // Sesuaikan dengan tinggi footer
|
||||
},
|
||||
|
||||
footer: {
|
||||
width: "100%",
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderTop: `1px solid ${AccentColor.blue}`,
|
||||
height: "10vh", // Tinggi footer
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: "50%", // Pusatkan footer
|
||||
transform: "translateX(-50%)", // Pusatkan footer
|
||||
maxWidth: "500px", // Batasi lebar footer
|
||||
color: MainColor.white,
|
||||
borderTopLeftRadius: "10px",
|
||||
borderTopRightRadius: "10px",
|
||||
},
|
||||
}));
|
||||
|
||||
interface ClientLayoutProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function ClientLayout({ children }: ClientLayoutProps) {
|
||||
const [scrolled, setScrolled] = useState<boolean>(false);
|
||||
const { classes, cx } = useStyles();
|
||||
|
||||
// Effect untuk mendeteksi scroll
|
||||
useEffect(() => {
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 10) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box className={classes.pageContainer}>
|
||||
{/* Header - tetap di atas */}
|
||||
<Box
|
||||
className={cx(classes.header, { [classes.scrolled]: scrolled })}
|
||||
component="header"
|
||||
>
|
||||
<Container size="xl" className={classes.headerContainer}>
|
||||
<Group position="apart" w={"100%"}>
|
||||
<ActionIcon>
|
||||
<IconSearch />
|
||||
</ActionIcon>
|
||||
<Title order={4}>Home Test</Title>
|
||||
<ActionIcon>
|
||||
<IconBell />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Konten utama - bisa di-scroll */}
|
||||
<Box className={classes.content}>
|
||||
<Container>{children}</Container>
|
||||
</Box>
|
||||
|
||||
{/* Footer - tetap di bawah */}
|
||||
<Box className={classes.footer} component="footer">
|
||||
<Container size="xl">
|
||||
<Group position="apart" py="md">
|
||||
<Text size="sm">© 2025 Nama Perusahaan</Text>
|
||||
<Group spacing="xs">
|
||||
<Button variant="subtle" size="xs">
|
||||
Privasi
|
||||
</Button>
|
||||
<Button variant="subtle" size="xs">
|
||||
Syarat
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
91
src/app/zCoba/home/v2_view.tsx
Normal file
91
src/app/zCoba/home/v2_view.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
// app/page.tsx
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import ClientLayout from "./v2_coba_tamplate";
|
||||
|
||||
export default function ViewV2() {
|
||||
return (
|
||||
<ClientLayout>
|
||||
<Stack spacing="xl" c={"white"}>
|
||||
<Title order={1} ta="center" my="lg" size="h2">
|
||||
Selamat Datang
|
||||
</Title>
|
||||
|
||||
<Text size="md" ta="center" mb="lg">
|
||||
Aplikasi dengan layout yang dioptimalkan untuk tampilan mobile
|
||||
</Text>
|
||||
|
||||
|
||||
<Stack spacing="md">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Card opacity={0.3} key={index} shadow="sm" padding="md" radius="md" withBorder>
|
||||
<Card.Section>
|
||||
<Image
|
||||
src={`/api/placeholder/400/200`}
|
||||
height={160}
|
||||
alt={`Produk ${index + 1}`}
|
||||
/>
|
||||
</Card.Section>
|
||||
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text fw={500}>Produk {index + 1}</Text>
|
||||
<Badge color="blue" variant="light">
|
||||
Baru
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi produk yang singkat dan padat untuk tampilan mobile.
|
||||
Fokus pada informasi penting saja.
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
fullWidth
|
||||
mt="md"
|
||||
radius="md"
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
|
||||
<Paper
|
||||
shadow="md"
|
||||
p="md"
|
||||
withBorder
|
||||
radius="md"
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(45deg, #228be6, #4c6ef5)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Text fw={700} size="lg" ta="center">
|
||||
Promo Spesial
|
||||
</Text>
|
||||
<Text ta="center" my="sm">
|
||||
Dapatkan diskon 20% untuk pembelian pertama
|
||||
</Text>
|
||||
<Button variant="white" color="blue" fullWidth>
|
||||
Klaim Sekarang
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
</Stack>
|
||||
</ClientLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user