crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-08 10:47:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add categories menu

Browse Source
This commit is contained in:
Minjee Son 2024-09-10 13:32:13 +01:00
parent 792f02645a
commit 090a0a041a
4 changed files with 88 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/error.tsx
View File

@ -5,9 +5,8 @@ import { useRouter } from 'next/navigation';
export default function Error({ resetAction }: { resetAction?: () => void }) {
const router = useRouter();
// '/'로 이동하는 defaultReset 함수
const defaultReset = () => {
router.push('/'); // 메인 페이지로 이동
router.push('/');
};
return (

4
app/page.tsx
View File

@ -24,7 +24,7 @@ export default async function HomePage() {
<>
<section className="relative">
<Navbar />
<div className={'relative h-screen w-screen'}>
<div className="relative h-screen w-screen">
<Image
src={
products[0].featuredImage.url || '' //Todo: default image
@ -39,7 +39,7 @@ export default async function HomePage() {
<div className="absolute bottom-20 flex w-full flex-col items-center text-lightText">
<h1 className="text-xl">{products[0].title}</h1>
<span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span>
<div className={`text-mainBG flex w-[384px] justify-center gap-[10px]`}>
<div className="flex w-[384px] justify-center gap-[10px] text-mainBG">
<PriceBox title="Box of 20" price={2460} />
<PriceBox title="Single Cigar" price={120} />
</div>

95
components/layout/navbar/index.tsx
View File

@ -1,5 +1,4 @@
import Link from 'next/link';
import { Suspense } from 'react';
'use client';
import {
Bars3Icon,
@ -8,23 +7,37 @@ import {
UserIcon
} from '@heroicons/react/24/outline';
import Logo from 'components/icons/logo';
import { SearchSkeleton } from './search';
import { LiHTMLAttributes, useState } from 'react';
interface MenuListItemProps extends LiHTMLAttributes<HTMLLIElement> {
type: 'main' | 'sub';
}
function MenuListItem({ type, children }: MenuListItemProps) {
return (
<>
{type === 'main' ? (
<li className="hover:bg-menuHover/15 px-[10px] py-[15px] hover:rounded-md">{children}</li>
) : (
<li className="p-[10px]">{children}</li>
)}
</>
);
}
export function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
export async function Navbar() {
return (
<nav className="absolute left-0 top-0 z-10 flex w-full items-center px-[4.38rem] py-[3.12rem]">
<div className="flex w-full items-center justify-between">
{/* burger menu */}
<div className="block flex-none">
<button onClick={() => setIsMenuOpen(true)}>
<Bars3Icon width={24} height={24} color="white" />
</div>
</button>
{/* logo */}
<div className="justify-center md:flex md:w-1/3">
<Suspense fallback={<SearchSkeleton />}>
<Link href="/" prefetch={true}>
<Logo />
</Link>
</Suspense>
<div className="z-10 justify-center md:flex md:w-1/3">
<Logo />
</div>
{/* 3 icons */}
<div className="flex justify-between gap-[1.88rem]">
@ -33,6 +46,64 @@ export async function Navbar() {
<ShoppingBagIcon width={16} height={16} fill="white" color="white" />
</div>
</div>
{/* Categories menu */}
{isMenuOpen && (
<div className="absolute left-0 top-0 h-screen w-full bg-black/75 text-white">
<div className="flex h-full flex-col items-center justify-start pt-[190px]">
<div className="grid w-3/4 grid-cols-4 gap-8 text-left text-lightText">
<ul>
<MenuListItem type="main">All Brands</MenuListItem>
<MenuListItem type="main">Special Offers</MenuListItem>
<MenuListItem type="main">Collectors</MenuListItem>
<MenuListItem type="main">MenuListItemmited Edition</MenuListItem>
<MenuListItem type="main">Regional Edition</MenuListItem>
<MenuListItem type="main">Vintage</MenuListItem>
<MenuListItem type="main">Accessories</MenuListItem>
</ul>
<ul>
<MenuListItem type="sub">Bolivar</MenuListItem>
<MenuListItem type="sub">Cohiba</MenuListItem>
<MenuListItem type="sub">Cuaba</MenuListItem>
<MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
<MenuListItem type="sub">Juan Lopez</MenuListItem>
<MenuListItem type="sub">H. Upmann</MenuListItem>
<MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
<MenuListItem type="sub">La Flor De Cano</MenuListItem>
<MenuListItem type="sub">La Gloria Cubana</MenuListItem>
<MenuListItem type="sub">Montecristo</MenuListItem>
<MenuListItem type="sub">Partagas</MenuListItem>
</ul>
<ul>
<MenuListItem type="sub">Bolivar</MenuListItem>
<MenuListItem type="sub">Cohiba</MenuListItem>
<MenuListItem type="sub">Cuaba</MenuListItem>
<MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
<MenuListItem type="sub">Juan Lopez</MenuListItem>
<MenuListItem type="sub">H. Upmann</MenuListItem>
<MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
<MenuListItem type="sub">La Flor De Cano</MenuListItem>
<MenuListItem type="sub">La Gloria Cubana</MenuListItem>
<MenuListItem type="sub">Montecristo</MenuListItem>
<MenuListItem type="sub">Partagas</MenuListItem>
</ul>
<ul>
<MenuListItem type="sub">Bolivar</MenuListItem>
<MenuListItem type="sub">Cohiba</MenuListItem>
<MenuListItem type="sub">Cuaba</MenuListItem>
<MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
<MenuListItem type="sub">Juan Lopez</MenuListItem>
<MenuListItem type="sub">H. Upmann</MenuListItem>
<MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
<MenuListItem type="sub">La Flor De Cano</MenuListItem>
<MenuListItem type="sub">La Gloria Cubana</MenuListItem>
<MenuListItem type="sub">Montecristo</MenuListItem>
<MenuListItem type="sub">Partagas</MenuListItem>
</ul>
</div>
</div>
</div>
)}
</nav>
);
}

3
tailwind.config.js
View File

@ -10,7 +10,8 @@ module.exports = {
},
colors: {
lightText: '#FFF2DB',
mainBG: '#F8E8D1'
mainBG: '#F8E8D1',
menuHover: '#C6BAA7'
},
keyframes: {
fadeIn: {