mirror of
https://github.com/vercel/commerce.git
synced 2025-05-12 12:47:50 +00:00
stub out header
This commit is contained in:
druzydowns
parent
3a18f9a098
commit
cf49ed9c18
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -2,8 +2,8 @@
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"typescript.enablePromptUseWorkspaceTsdk": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": true,
|
||||
"source.organizeImports": true,
|
||||
"source.sortMembers": true
|
||||
"source.fixAll": "explicit",
|
||||
"source.organizeImports": "explicit",
|
||||
"source.sortMembers": "explicit"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Carousel } from 'components/carousel';
|
||||
import { CarouselPrints } from 'components/carouselPrints';
|
||||
import { ThreeItemGrid } from 'components/grid/three-items';
|
||||
import Footer from 'components/layout/footer';
|
||||
import { Suspense } from 'react';
|
||||
@ -17,7 +17,7 @@ export default async function HomePage() {
|
||||
<>
|
||||
<ThreeItemGrid />
|
||||
<Suspense>
|
||||
<Carousel />
|
||||
<CarouselPrints />
|
||||
<Suspense>
|
||||
<Footer />
|
||||
</Suspense>
|
||||
|
||||
@ -4,7 +4,7 @@ import { GridTileImage } from './grid/tile';
|
||||
|
||||
export async function Carousel() {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
|
||||
const products = await getCollectionProducts({ collection: 'shirts' });
|
||||
|
||||
if (!products?.length) return null;
|
||||
|
||||
@ -12,7 +12,7 @@ export async function Carousel() {
|
||||
const carouselProducts = [...products, ...products, ...products];
|
||||
|
||||
return (
|
||||
<div className=" w-full overflow-x-auto pb-6 pt-1">
|
||||
<div className="w-full overflow-x-auto pb-6 pt-1 ">
|
||||
<ul className="flex animate-carousel gap-4">
|
||||
{carouselProducts.map((product, i) => (
|
||||
<li
|
||||
|
||||
40
components/carouselPrints.tsx
Normal file
40
components/carouselPrints.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { getCollectionProducts } from 'lib/shopify';
|
||||
import Link from 'next/link';
|
||||
import { GridTileImage } from './grid/tile';
|
||||
|
||||
export async function CarouselPrints() {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
const products = await getCollectionProducts({ collection: 'prints' });
|
||||
|
||||
if (!products?.length) return null;
|
||||
|
||||
// Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
|
||||
const carouselProducts = [...products, ...products, ...products, ...products];
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto pb-6 pt-1 ">
|
||||
<ul className="flex animate-carousel gap-4">
|
||||
{carouselProducts.map((product, i) => (
|
||||
<li
|
||||
key={`${product.handle}${i}`}
|
||||
className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
|
||||
>
|
||||
<Link href={`/product/${product.handle}`} className="relative h-full w-full">
|
||||
<GridTileImage
|
||||
alt={product.title}
|
||||
label={{
|
||||
title: product.title,
|
||||
amount: product.priceRange.maxVariantPrice.amount,
|
||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
||||
}}
|
||||
src={product.featuredImage?.url}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -40,7 +40,7 @@ function ThreeItemGridItem({
|
||||
export async function ThreeItemGrid() {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
const homepageItems = await getCollectionProducts({
|
||||
collection: 'hidden-homepage-featured-items'
|
||||
collection: 'shirts'
|
||||
});
|
||||
|
||||
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
|
||||
|
||||
63
components/icons/okayLogotype.tsx
Normal file
63
components/icons/okayLogotype.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function OkayLogotype(props: React.ComponentProps<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label={`${process.env.SITE_NAME} logo`}
|
||||
id="Layer_2"
|
||||
data-name="Layer 2"
|
||||
viewBox="0 0 390 228.13"
|
||||
{...props}
|
||||
className={clsx('fill-black dark:fill-white', props.className)}
|
||||
>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g>
|
||||
<g id="OkayXL_Logotype" data-name="OkayXL Logotype">
|
||||
<g>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m0,93.31C0,51.94,31.07,20.87,72.63,20.87s72.93,31.07,72.93,72.44-31.37,72.73-72.93,72.73S0,134.87,0,93.31Zm72.63,70.09c29.7.2,51.27-29.31,51.27-70.09S102.34,23.32,72.63,23.52c-29.41-.2-50.78,29.21-50.78,69.79s21.37,70.28,50.78,70.09Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m140,163.44c6.16-2.25,9-7.45,9-16.86V26.72c0-8.5-2.93-12.19-12-12.38v-1.12L167,0v146.58c0,9.41,2.84,14.61,9,16.86v.39h-36v-.39Zm48.78-72.97c16.92-15.92,18.97-24.02,6.22-27.25v-.39h33.55l-.1.2c-9.43,4.69-19.55,11.62-25.77,17.48l-19.26,18.26,50.57,63.87v.2h-22.47l-42.31-54,19.55-18.36Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m229.71,143.3c0-30.22,44.26-34.25,44.26-67.02,0-9.32-3.53-14.72-10.11-14.72-9.91,0-24.04,11.97-33.46,38.27h-.39v-27.99s20.38-12.06,34-12.06c17.15,0,28.33,8.92,28,29.9v57.25c-.16,5.39,1.61,7.06,3.76,7.06,2.55,0,5.49-2.45,7.16-8.15h.39c-.49,15.11-9.61,19.13-15.98,19.13-10.19,0-11.76-23.13-11.76-23.13h-1.02c-2.65,16.68-12.27,23.75-24.04,23.75s-20.8-8.05-20.8-22.28Zm30.47,15.48c5.1,0,11.17-4.41,13.82-20.88l.59-51.17c-5.2,20.58-26.07,25.09-26.07,52.34,0,15.29,6.57,19.7,11.67,19.7Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m339.11,164.4l-47.66-101.18.2-.39h35.35v.39c-9.49,3.53-9.78,13.43-1.16,32.15l22.57,48.62,17.15-36.86c12.59-27.05,11.14-40.58-4.55-43.91v-.39h29v.39l-66.88,140.61h-29.12v-.39c25.49-13.47,39.52-29.1,45.11-39.04Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m71.4,120.24c-.95-1.78-1.48-2.43-1.65-3.17-.71-3.06-1.29-6.15-1.95-9.22-1.19-5.54-3.93-9.58-9.91-10.9-1.38-.31-2.53-1.71-3.78-2.61,1.05-1,1.93-2.52,3.17-2.91,8.86-2.79,9.76-10.2,10.71-17.71.41-3.28.96-6.54,1.63-9.78.16-.8,1.02-1.45,1.56-2.17.52.75,1.39,1.46,1.5,2.27.52,3.75.93,7.51,1.2,11.29.65,9.27,5,15.04,14.64,16.2,1.03.12,1.96,1.12,2.93,1.72-.85.77-1.62,2.07-2.57,2.22-10.73,1.67-14.35,9.04-15.47,18.66-.2,1.72-1.08,3.36-2.01,6.12Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m357.52,62.55c-.75.58-1.24,1.26-1.84,1.38-7.05,1.45-8.75,6.95-9.95,12.89-.13.64-.52,1.24-.79,1.85-.38-.6-.97-1.16-1.11-1.82-1.48-6.8-4.76-11.78-12.31-12.7-.45-.06-.84-.64-1.26-.99.39-.44.74-1.22,1.18-1.27,7.41-.9,11.58-4.95,12.4-12.43.04-.41.7-.74,1.07-1.11.24.41.66.81.69,1.23.52,6.74,3.52,11.2,10.73,11.94.36.04.67.55,1.19,1.02Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m274.57,179.53c.34,1.21.47,1.58.54,1.97.32,1.74.88,3.47.89,5.21.09,8.58,2.91,14.72,12.71,15.2.84.04,1.63.98,2.44,1.5-.37.42-.71,1.18-1.1,1.2-13.91.74-13.55,11.22-14.39,20.92-.08.89-.61,1.74-.94,2.6-.35-.9-.84-1.77-1.01-2.7-.34-1.9-.68-3.83-.69-5.75-.05-9.01-4.58-13.74-13.47-14.61-.88-.09-1.67-1.06-2.51-1.63.82-.47,1.63-1.35,2.45-1.35,13.68.02,12.59-10.76,14.35-19.47.15-.77.36-1.53.72-3.1Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m209.68,112.45c-.39-.58-.82-.99-.97-1.48-.94-3.03-2.74-5.21-5.77-6.39-.3-.12-.43-1.82-.19-1.96,3.43-1.88,5.47-4.77,6.59-8.43.1-.31.61-.78.78-.73.34.11.76.5.84.84.82,3.55,2.06,6.75,5.87,8.17.18.07.24,1.34.05,1.43-3.23,1.62-5.15,4.24-6.18,7.63-.09.31-.55.51-1.02.92Z"
|
||||
/>
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="57.46" x2="70.74" y2="43.34" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="41.85" x2="70.74" y2="34.22" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="33.47" x2="70.74" y2="4.74" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="142.7" x2="70.74" y2="184.96" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="124.6" x2="70.74" y2="140.04" />
|
||||
<line strokeWidth="0.5px" x1="95.97" y1="93.46" x2="172.15" y2="93.46" />
|
||||
<line strokeWidth="0.5px" x1="48.93" y1="93.46" x2="28.24" y2="93.46" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
40
components/icons/okaylogo.svg
Normal file
40
components/icons/okaylogo.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 228.13">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: .5px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g>
|
||||
<g id="OkayXL_Logotype" data-name="OkayXL Logotype">
|
||||
<g>
|
||||
<path class="cls-1" d="m0,93.31C0,51.94,31.07,20.87,72.63,20.87s72.93,31.07,72.93,72.44-31.37,72.73-72.93,72.73S0,134.87,0,93.31Zm72.63,70.09c29.7.2,51.27-29.31,51.27-70.09S102.34,23.32,72.63,23.52c-29.41-.2-50.78,29.21-50.78,69.79s21.37,70.28,50.78,70.09Z"/>
|
||||
<path class="cls-1" d="m140,163.44c6.16-2.25,9-7.45,9-16.86V26.72c0-8.5-2.93-12.19-12-12.38v-1.12L167,0v146.58c0,9.41,2.84,14.61,9,16.86v.39h-36v-.39Zm48.78-72.97c16.92-15.92,18.97-24.02,6.22-27.25v-.39h33.55l-.1.2c-9.43,4.69-19.55,11.62-25.77,17.48l-19.26,18.26,50.57,63.87v.2h-22.47l-42.31-54,19.55-18.36Z"/>
|
||||
<path class="cls-1" d="m229.71,143.3c0-30.22,44.26-34.25,44.26-67.02,0-9.32-3.53-14.72-10.11-14.72-9.91,0-24.04,11.97-33.46,38.27h-.39v-27.99s20.38-12.06,34-12.06c17.15,0,28.33,8.92,28,29.9v57.25c-.16,5.39,1.61,7.06,3.76,7.06,2.55,0,5.49-2.45,7.16-8.15h.39c-.49,15.11-9.61,19.13-15.98,19.13-10.19,0-11.76-23.13-11.76-23.13h-1.02c-2.65,16.68-12.27,23.75-24.04,23.75s-20.8-8.05-20.8-22.28Zm30.47,15.48c5.1,0,11.17-4.41,13.82-20.88l.59-51.17c-5.2,20.58-26.07,25.09-26.07,52.34,0,15.29,6.57,19.7,11.67,19.7Z"/>
|
||||
<path class="cls-1" d="m339.11,164.4l-47.66-101.18.2-.39h35.35v.39c-9.49,3.53-9.78,13.43-1.16,32.15l22.57,48.62,17.15-36.86c12.59-27.05,11.14-40.58-4.55-43.91v-.39h29v.39l-66.88,140.61h-29.12v-.39c25.49-13.47,39.52-29.1,45.11-39.04Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="cls-1" d="m71.4,120.24c-.95-1.78-1.48-2.43-1.65-3.17-.71-3.06-1.29-6.15-1.95-9.22-1.19-5.54-3.93-9.58-9.91-10.9-1.38-.31-2.53-1.71-3.78-2.61,1.05-1,1.93-2.52,3.17-2.91,8.86-2.79,9.76-10.2,10.71-17.71.41-3.28.96-6.54,1.63-9.78.16-.8,1.02-1.45,1.56-2.17.52.75,1.39,1.46,1.5,2.27.52,3.75.93,7.51,1.2,11.29.65,9.27,5,15.04,14.64,16.2,1.03.12,1.96,1.12,2.93,1.72-.85.77-1.62,2.07-2.57,2.22-10.73,1.67-14.35,9.04-15.47,18.66-.2,1.72-1.08,3.36-2.01,6.12Z"/>
|
||||
<path class="cls-1" d="m357.52,62.55c-.75.58-1.24,1.26-1.84,1.38-7.05,1.45-8.75,6.95-9.95,12.89-.13.64-.52,1.24-.79,1.85-.38-.6-.97-1.16-1.11-1.82-1.48-6.8-4.76-11.78-12.31-12.7-.45-.06-.84-.64-1.26-.99.39-.44.74-1.22,1.18-1.27,7.41-.9,11.58-4.95,12.4-12.43.04-.41.7-.74,1.07-1.11.24.41.66.81.69,1.23.52,6.74,3.52,11.2,10.73,11.94.36.04.67.55,1.19,1.02Z"/>
|
||||
<path class="cls-1" d="m274.57,179.53c.34,1.21.47,1.58.54,1.97.32,1.74.88,3.47.89,5.21.09,8.58,2.91,14.72,12.71,15.2.84.04,1.63.98,2.44,1.5-.37.42-.71,1.18-1.1,1.2-13.91.74-13.55,11.22-14.39,20.92-.08.89-.61,1.74-.94,2.6-.35-.9-.84-1.77-1.01-2.7-.34-1.9-.68-3.83-.69-5.75-.05-9.01-4.58-13.74-13.47-14.61-.88-.09-1.67-1.06-2.51-1.63.82-.47,1.63-1.35,2.45-1.35,13.68.02,12.59-10.76,14.35-19.47.15-.77.36-1.53.72-3.1Z"/>
|
||||
<path class="cls-1" d="m209.68,112.45c-.39-.58-.82-.99-.97-1.48-.94-3.03-2.74-5.21-5.77-6.39-.3-.12-.43-1.82-.19-1.96,3.43-1.88,5.47-4.77,6.59-8.43.1-.31.61-.78.78-.73.34.11.76.5.84.84.82,3.55,2.06,6.75,5.87,8.17.18.07.24,1.34.05,1.43-3.23,1.62-5.15,4.24-6.18,7.63-.09.31-.55.51-1.02.92Z"/>
|
||||
<line class="cls-2" x1="70.74" y1="57.46" x2="70.74" y2="43.34"/>
|
||||
<line class="cls-2" x1="70.74" y1="41.85" x2="70.74" y2="34.22"/>
|
||||
<line class="cls-2" x1="70.74" y1="33.47" x2="70.74" y2="4.74"/>
|
||||
<line class="cls-2" x1="70.74" y1="142.7" x2="70.74" y2="184.96"/>
|
||||
<line class="cls-2" x1="70.74" y1="124.6" x2="70.74" y2="140.04"/>
|
||||
<line class="cls-2" x1="95.97" y1="93.46" x2="172.15" y2="93.46"/>
|
||||
<line class="cls-2" x1="48.93" y1="93.46" x2="28.24" y2="93.46"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,6 +1,6 @@
|
||||
import Cart from 'components/cart';
|
||||
import OpenCart from 'components/cart/open-cart';
|
||||
import LogoSquare from 'components/logo-square';
|
||||
import OkayLogotype from 'components/icons/okayLogotype';
|
||||
import { getMenu } from 'lib/shopify';
|
||||
import { Menu } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
@ -18,15 +18,15 @@ export default async function Navbar() {
|
||||
<MobileMenu menu={menu} />
|
||||
</div>
|
||||
<div className="flex w-full items-center">
|
||||
<div className="flex w-full md:w-1/3">
|
||||
<div className="flex w-full md:w-1/2">
|
||||
<Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
|
||||
<LogoSquare />
|
||||
<div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
|
||||
{SITE_NAME}
|
||||
{/* <LogoSquare /> */}
|
||||
<div className="mx-12 w-full md:mx-0 lg:block">
|
||||
<OkayLogotype className="w-full" />
|
||||
</div>
|
||||
</Link>
|
||||
{menu.length ? (
|
||||
<ul className="hidden gap-6 text-sm md:flex md:items-center">
|
||||
<ul className="hidden gap-6 text-sm md:mr-2 md:flex md:items-center">
|
||||
{menu.map((item: Menu) => (
|
||||
<li key={item.title}>
|
||||
<Link
|
||||
|
||||
54
components/layout/navbar/ogNav.tsx
Normal file
54
components/layout/navbar/ogNav.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import Cart from 'components/cart';
|
||||
import OpenCart from 'components/cart/open-cart';
|
||||
import LogoSquare from 'components/logo-square';
|
||||
import { getMenu } from 'lib/shopify';
|
||||
import { Menu } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
import { Suspense } from 'react';
|
||||
import MobileMenu from './mobile-menu';
|
||||
import Search from './search';
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export default async function OgNavbar() {
|
||||
const menu = await getMenu('next-js-frontend-header-menu');
|
||||
|
||||
return (
|
||||
<nav className="relative flex items-center justify-between p-4 lg:px-6">
|
||||
<div className="block flex-none md:hidden">
|
||||
<MobileMenu menu={menu} />
|
||||
</div>
|
||||
<div className="flex w-full items-center">
|
||||
<div className="flex w-full md:w-1/3">
|
||||
<Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
|
||||
<LogoSquare />
|
||||
<div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
|
||||
{SITE_NAME}
|
||||
</div>
|
||||
</Link>
|
||||
{menu.length ? (
|
||||
<ul className="hidden gap-6 text-sm md:flex md:items-center">
|
||||
{menu.map((item: Menu) => (
|
||||
<li key={item.title}>
|
||||
<Link
|
||||
href={item.path}
|
||||
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="hidden justify-center md:flex md:w-1/3">
|
||||
<Search />
|
||||
</div>
|
||||
<div className="flex justify-end md:w-1/3">
|
||||
<Suspense fallback={<OpenCart />}>
|
||||
<Cart />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@ -30,7 +30,7 @@ export default function Search() {
|
||||
key={searchParams?.get('q')}
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search for products..."
|
||||
placeholder="Search for..."
|
||||
autoComplete="off"
|
||||
defaultValue={searchParams?.get('q') || ''}
|
||||
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user