husni/wisatin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update menu navigation

Browse Source
This commit is contained in:
Husni Ailatat 2025-12-06 11:41:41 +07:00
parent 62bc47672f
commit 3af6e2b531
6 changed files with 115 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -10,6 +10,8 @@
},
"dependencies": {
"@ant-design/cssinjs": "^2.0.1",
"@hugeicons/core-free-icons": "^2.0.0",
"@hugeicons/react": "^1.1.1",
"antd": "^6.0.1",
"clsx": "^2.1.1",
"embla-carousel": "^8.6.0",

20
pnpm-lock.yaml generated
View File

@ -11,6 +11,12 @@ importers:
'@ant-design/cssinjs':
specifier: ^2.0.1
version: 2.0.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
'@hugeicons/core-free-icons':
specifier: ^2.0.0
version: 2.0.0
'@hugeicons/react':
specifier: ^1.1.1
version: 1.1.1(react@19.2.0)
antd:
specifier: ^6.0.1
version: 6.0.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@ -243,6 +249,14 @@ packages:
resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@hugeicons/core-free-icons@2.0.0':
resolution: {integrity: sha512-OSfv5k0iB0yG61dcfK7jcf00AIK8EXyQOgtcNJzSBFvm88n9VOelkxihZHJnNwDUFpO/jZI3vZSVp6i1dmRvJQ==}
'@hugeicons/react@1.1.1':
resolution: {integrity: sha512-BAbFVtx0XZ/yF2poPLFn0N9Ji6ebV/MpI5+WRqooFp3smQDwpL+72m+BBs4KAM5djgWUpg12weyc5SJtTsOwsw==}
peerDependencies:
react: '>=16.0.0'
'@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'}
@ -2598,6 +2612,12 @@ snapshots:
'@eslint/core': 0.17.0
levn: 0.4.1
'@hugeicons/core-free-icons@2.0.0': {}
'@hugeicons/react@1.1.1(react@19.2.0)':
dependencies:
react: 19.2.0
'@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.7':

47
src/Components/Molecules/PublicLayout/index.tsx
View File

@ -1,21 +1,27 @@
import Box from "@/Components/Atoms/Box";
import { useBreakpoints } from "@/Contexts/BreakPointContext";
import useClient from "@/Hooks/useClient";
import { HugeiconsIcon } from "@hugeicons/react";
import { Button, Radio, Space } from "antd";
import { Calendar, Compass, Map, MapPin, Menu, Store } from "lucide-react";
import Link from "next/link";
import { PropsWithChildren, useState } from "react";
import { DiscoverSquareIcon, Home07Icon, UserSquareIcon } from '@hugeicons/core-free-icons'
import { usePathname } from "next/navigation";
import { cn } from "@/Functions/cn";
const PublicLayout: React.FC<PropsWithChildren> = ({ children }) => {
const { isDesktop } = useBreakpoints();
const isClient = useClient();
const pathname = usePathname()
const [position, setPosition] = useState<'ID' | 'EN'>('ID');
if (!isClient) return;
return (
<Box className="min-h-screen bg-gray-50">
<Box className="min-h-screen bg-gray-50 relative">
<nav className="bg-white shadow-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
@ -26,12 +32,16 @@ const PublicLayout: React.FC<PropsWithChildren> = ({ children }) => {
{/* Desktop Menu */}
<div className="items-center gap-6 flex">
<div className="hidden md:flex items-center gap-12">
<Link href="/" className="flex items-center text-gray-700 hover:text-primary transition">
<Store className="size-6 mr-2" />
<span className="font-semibold">Product</span>
<Link href="/" className={cn(
"flex items-center text-gray-700 hover:text-primary transition",
pathname === "/" && "text-primary"
)}>
<span className="font-semibold">Home</span>
</Link>
<Link href="/explore" className="flex items-center text-gray-700 hover:text-primary transition">
<Compass className="size-6 mr-2" />
<Link href="/explore" className={cn(
"flex items-center text-gray-700 hover:text-primary transition",
pathname === "/explore" && "text-primary"
)}>
<span className="font-semibold">Explore</span>
</Link>
</div>
@ -58,6 +68,31 @@ const PublicLayout: React.FC<PropsWithChildren> = ({ children }) => {
<div>
{children}
</div>
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-md">
<div className="flex items-center justify-around py-2">
<Link href="/" className={cn(
"flex flex-col items-center gap-1 text-black text-sm",
pathname === "/" && "text-primary"
)}>
<HugeiconsIcon icon={Home07Icon} className="size-7" />
<span>Home</span>
</Link>
<Link href="/explore" className={cn(
"flex flex-col items-center gap-1 text-black text-sm",
pathname === "/explore" && "text-primary"
)}>
<HugeiconsIcon icon={DiscoverSquareIcon} className="size-7" />
<span>Explore</span>
</Link>
<Link href="/login" className={cn(
"flex flex-col items-center gap-1 text-black text-sm",
pathname === "/login" && "text-primary"
)}>
<HugeiconsIcon icon={UserSquareIcon} className="size-7" />
<span>Account</span>
</Link>
</div>
</div>
</Box>
)
}

2
src/Constants/PublicRoutes.ts
View File

@ -1 +1 @@
export const publicRoutes = ['/', '/login', 'register'];
export const publicRoutes = ['/', '/explore', '/login', 'register'];

54
src/LegacyPages/Public/Home/HomeBanner/index.tsx
View File

@ -1,5 +1,5 @@
import { Fragment, useRef, useState } from 'react';
import { Fragment, useMemo, useRef, useState } from 'react';
import { Button } from 'antd';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import useClient from '@/Hooks/useClient';
@ -7,10 +7,15 @@ import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useBreakpoints } from '@/Contexts/BreakPointContext';
export default function HomeBanner() {
const isClient = useClient();
const { isMobile, isTablet, isDesktop } = useBreakpoints()
console.log({isMobile, isTablet, isDesktop});
const [activeIndex, setActiveIndex] = useState<number>(0);
const sliderRef = useRef<Slider | null>(null);
@ -36,28 +41,63 @@ export default function HomeBanner() {
<div className='flex flex-col relative mt-5'>
<Slider
ref={sliderRef}
className='center'
// className='center'
centerMode
infinite
beforeChange={(current, next) => setActiveIndex(next)}
slidesToShow={3}
slidesToShow={isMobile ? 1 : 3}
slidesToScroll={1}
arrows={false}
speed={500}
responsive={[
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
centerMode: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
centerMode: true
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true
}
},
{
breakpoint: 300,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true
}
}
]}
>
{banners.map((item, index) => (
<Fragment key={index}>
<div className='mx-3'>
<img
src={item}
className='w-full md:h-[300px] h-[200px] object-cover rounded-2xl'
className='w-full xl:h-[300px] lg:h-[200px] h-[150px] object-cover rounded-2xl'
/>
</div>
</Fragment>
))}
</Slider>
<div className="flex justify-center items-center gap-2 mt-6">
<div className="flex justify-center items-center gap-2 mt-2">
<Button variant='text' type='text' onClick={onPrevious}>
<ChevronLeft/>
<ChevronLeft />
</Button>
{banners.map((_, index) => (
<button
@ -70,7 +110,7 @@ export default function HomeBanner() {
/>
))}
<Button variant='text' type='text' onClick={onNext}>
<ChevronRight/>
<ChevronRight />
</Button>
</div>
</div>

2
src/Styles/globals.css
View File

@ -30,6 +30,6 @@
body {
background: var(--background);
color: var(--foreground);
color: #0a0a0a;
font-family: Arial, Helvetica, sans-serif;
}