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

styling and adjusting footer & navbar

Browse Source
This commit is contained in:
Samantha Kellow 2024-04-24 17:50:39 +01:00
parent 18200b4e84
commit 0bf97ecdf6
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/layout/footer.tsx
View File

@ -1,7 +1,5 @@
import Link from 'next/link';
import FooterMenu from 'components/layout/footer-menu'; import FooterMenu from 'components/layout/footer-menu';
import LogoSquare from 'components/ui/logo-square';
import { getMenu } from 'lib/shopify'; import { getMenu } from 'lib/shopify';
import { Suspense } from 'react'; import { Suspense } from 'react';
@ -17,12 +15,12 @@ export default async function Footer() {
return ( return (
<footer className="text-sm text-neutral-500 dark:text-neutral-400"> <footer className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-700 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0"> <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-700 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
<div> {/* <div>
<Link className="flex items-center gap-2 text-black dark:text-white" href="/"> <Link className="flex items-center gap-2 text-black dark:text-white" href="/">
<LogoSquare size="sm" /> <LogoSquare size="sm" />
{/* <span className="uppercase">{SITE_NAME}</span> */} <span className="uppercase">{SITE_NAME}</span>
</Link> </Link>
</div> </div> */}
<Suspense <Suspense
fallback={ fallback={
<div className="flex h-[188px] w-[100px] flex-col gap-2 "> <div className="flex h-[188px] w-[100px] flex-col gap-2 ">

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

@ -6,7 +6,6 @@ import { Menu } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
import { Suspense } from 'react'; import { Suspense } from 'react';
import MobileMenu from './mobile-menu'; import MobileMenu from './mobile-menu';
import Search from './search';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
export default async function Navbar() { export default async function Navbar() {
@ -30,7 +29,7 @@ export default async function Navbar() {
</div> */} </div> */}
<LogoType /> <LogoType />
</Link> </Link>
{menu.length ? ( {/* {menu.length ? (
<ul className="hidden text-sm md:flex md:items-center"> <ul className="hidden text-sm md:flex md:items-center">
{menu.map((item: Menu) => ( {menu.map((item: Menu) => (
<li key={item.title}> <li key={item.title}>
@ -43,11 +42,25 @@ export default async function Navbar() {
</li> </li>
))} ))}
</ul> </ul>
) : null} ) : null} */}
</div> </div>
<div className="hidden justify-center md:flex md:w-1/3"> {/* <div className="hidden justify-center md:flex md:w-1/3">
<Search /> <Search />
</div> </div> */}
{menu.length ? (
<ul className="hidden text-sm md:flex md:items-center">
{menu.map((item: Menu) => (
<li key={item.title}>
<Link
href={item.path}
className="m-3 text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300 lg:mr-8"
>
{item.title}
</Link>
</li>
))}
</ul>
) : null}
<div className="flex justify-end md:w-1/3"> <div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}> <Suspense fallback={<OpenCart />}>
<Cart /> <Cart />