initial setup

navbar styling
2025-05-18 23:46:58 +00:00 · 2024-03-24 12:32:31 -05:00 · 2024-03-24 12:32:31 -05:00 · cfdc043a5f
commit cfdc043a5f
parent 3a18f9a098
14 changed files with 141 additions and 122 deletions
--- a/.env.example
+++ b/.env.example
@ -1,7 +0,0 @@
-COMPANY_NAME="Vercel Inc."
-TWITTER_CREATOR="@vercel"
-TWITTER_SITE="https://nextjs.org/commerce"
-SITE_NAME="Next.js Commerce"
-SHOPIFY_REVALIDATION_SECRET=""
-SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
-SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -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"
  }
 }
--- a/README.md
+++ b/README.md
@ -26,15 +26,6 @@ Vercel will only be actively maintaining a Shopify version [as outlined in our v
 Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.

 - Shopify (this repository)
- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
-
-> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).

 ## Integrations

@ -61,16 +52,6 @@ pnpm dev

 Your app should now be running on [localhost:3000](http://localhost:3000/).

-<details>
-  <summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
-
-1. Run `vc link`.
-1. Select the `Vercel Solutions` scope.
-1. Connect to the existing `commerce-shopify` project.
-1. Run `vc env pull` to get environment variables.
-1. Run `pnpm dev` to ensure everything is working correctly.
-</details>
-
 ## Vercel, Next.js Commerce, and Shopify Integration Guide

 You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/page.tsx
+++ b/app/page.tsx
@ -6,7 +6,7 @@ import { Suspense } from 'react';
 export const runtime = 'edge';

 export const metadata = {
-  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
+  description: 'School Supplies Shopping',
  openGraph: {
    type: 'website'
  }
--- a/app/product/layout.tsx
+++ b/app/product/layout.tsx
@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js'
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/components/cart/open-cart.tsx
+++ b/components/cart/open-cart.tsx
@ -9,9 +9,9 @@ export default function OpenCart({
  quantity?: number;
 }) {
  return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md text-black transition-colors dark:border-neutral-700 dark:text-white">
      <ShoppingCartIcon
-        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+        className={clsx('h-8 transition-all ease-in-out hover:scale-110 ', className)}
      />

      {quantity ? (
--- a/components/icons/logo.svg
+++ b/components/icons/logo.svg
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -6,49 +6,53 @@ 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 Navbar() {
  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}
+    <header className="border-b border-[#E5E5E5] bg-white py-4">
+      <nav className="flex items-center justify-between px-4 sm:px-6 lg:px-8">
+        <div className="block flex-none md:hidden">
+          <MobileMenu menu={menu} />
        </div>
-        <div className="hidden justify-center md:flex md:w-1/3">
+        <div className="flex w-full items-center">
+          <div className="flex w-full ">
+            <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 font-futura text-2rem font-extrabold tracking-custom text-futura-color">
+                {SITE_NAME}
+              </div>
+            </Link>
+            {menu.length ? (
+              <ul className="hidden space-x-4 md:flex md:flex-1 md:items-center">
+                {menu.map((item: Menu) => (
+                  <li key={item.title}>
+                    <Link
+                      href={item.path}
+                      className=" font-semibold text-custom-blue  underline-offset-4 hover:text-custom-blue 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-2/3">
+            <Suspense fallback={<OpenCart />}>
+              <Cart />
+            </Suspense>
+          </div>
        </div>
-        <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
-        </div>
-      </div>
-    </nav>
+      </nav>
+    </header>
  );
 }
--- a/components/logo-square.tsx
+++ b/components/logo-square.tsx
@ -1,22 +1,15 @@
-import clsx from 'clsx';
-import LogoIcon from './icons/logo';
+import Image from 'next/image';
+import SKLogo from './icons/logo.svg';

 export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
  return (
-    <div
-      className={clsx(
-        'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
-        {
-          'h-[40px] w-[40px] rounded-xl': !size,
-          'h-[30px] w-[30px] rounded-lg': size === 'sm'
-        }
-      )}
-    >
-      <LogoIcon
-        className={clsx({
-          'h-[16px] w-[16px]': !size,
-          'h-[10px] w-[10px]': size === 'sm'
-        })}
+    <div className={'flex items-center'}>
+      <Image
+        src={SKLogo}
+        alt="Logo"
+        width={size === 'sm' ? 10 : 50}
+        height={size === 'sm' ? 10 : 50}
+        layout="fixed"
      />
    </div>
  );
--- a/lib/constants.ts
+++ b/lib/constants.ts
@ -28,4 +28,4 @@ export const TAGS = {

 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
 export const DEFAULT_OPTION = 'Default Title';
-export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';
+export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2024-01/graphql.json';
--- a/package.json
+++ b/package.json
@ -26,7 +26,7 @@
    "@heroicons/react": "^2.0.18",
    "clsx": "^2.0.0",
    "geist": "^1.0.0",
-    "next": "14.0.0",
+    "next": "14.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,8 +18,8 @@ dependencies:
    specifier: ^1.0.0
    version: 1.0.0
  next:
-    specifier: 14.0.0
-    version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
+    specifier: 14.0.1
+    version: 14.0.1(react-dom@18.2.0)(react@18.2.0)
  react:
    specifier: 18.2.0
    version: 18.2.0
@ -228,8 +228,8 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.15
    dev: true

-  /@next/env@14.0.0:
-    resolution: {integrity: sha512-cIKhxkfVELB6hFjYsbtEeTus2mwrTC+JissfZYM0n+8Fv+g8ucUfOlm3VEDtwtwydZ0Nuauv3bl0qF82nnCAqA==}
+  /@next/env@14.0.1:
+    resolution: {integrity: sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==}
    dev: false

  /@next/eslint-plugin-next@14.0.0:
@ -242,8 +242,8 @@ packages:
    resolution: {integrity: sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==}
    dev: false

-  /@next/swc-darwin-arm64@14.0.0:
-    resolution: {integrity: sha512-HQKi159jCz4SRsPesVCiNN6tPSAFUkOuSkpJsqYTIlbHLKr1mD6be/J0TvWV6fwJekj81bZV9V/Tgx3C2HO9lA==}
+  /@next/swc-darwin-arm64@14.0.1:
+    resolution: {integrity: sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]
@ -251,8 +251,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-darwin-x64@14.0.0:
-    resolution: {integrity: sha512-4YyQLMSaCgX/kgC1jjF3s3xSoBnwHuDhnF6WA1DWNEYRsbOOPWjcYhv8TKhRe2ApdOam+VfQSffC4ZD+X4u1Cg==}
+  /@next/swc-darwin-x64@14.0.1:
+    resolution: {integrity: sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]
@ -260,8 +260,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-arm64-gnu@14.0.0:
-    resolution: {integrity: sha512-io7fMkJ28Glj7SH8yvnlD6naIhRDnDxeE55CmpQkj3+uaA2Hko6WGY2pT5SzpQLTnGGnviK85cy8EJ2qsETj/g==}
+  /@next/swc-linux-arm64-gnu@14.0.1:
+    resolution: {integrity: sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@ -269,8 +269,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-arm64-musl@14.0.0:
-    resolution: {integrity: sha512-nC2h0l1Jt8LEzyQeSs/BKpXAMe0mnHIMykYALWaeddTqCv5UEN8nGO3BG8JAqW/Y8iutqJsaMe2A9itS0d/r8w==}
+  /@next/swc-linux-arm64-musl@14.0.1:
+    resolution: {integrity: sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@ -278,8 +278,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-x64-gnu@14.0.0:
-    resolution: {integrity: sha512-Wf+WjXibJQ7hHXOdNOmSMW5bxeJHVf46Pwb3eLSD2L76NrytQlif9NH7JpHuFlYKCQGfKfgSYYre5rIfmnSwQw==}
+  /@next/swc-linux-x64-gnu@14.0.1:
+    resolution: {integrity: sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@ -287,8 +287,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-x64-musl@14.0.0:
-    resolution: {integrity: sha512-WTZb2G7B+CTsdigcJVkRxfcAIQj7Lf0ipPNRJ3vlSadU8f0CFGv/ST+sJwF5eSwIe6dxKoX0DG6OljDBaad+rg==}
+  /@next/swc-linux-x64-musl@14.0.1:
+    resolution: {integrity: sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@ -296,8 +296,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-arm64-msvc@14.0.0:
-    resolution: {integrity: sha512-7R8/x6oQODmNpnWVW00rlWX90sIlwluJwcvMT6GXNIBOvEf01t3fBg0AGURNKdTJg2xNuP7TyLchCL7Lh2DTiw==}
+  /@next/swc-win32-arm64-msvc@14.0.1:
+    resolution: {integrity: sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]
@ -305,8 +305,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-ia32-msvc@14.0.0:
-    resolution: {integrity: sha512-RLK1nELvhCnxaWPF07jGU4x3tjbyx2319q43loZELqF0+iJtKutZ+Lk8SVmf/KiJkYBc7Cragadz7hb3uQvz4g==}
+  /@next/swc-win32-ia32-msvc@14.0.1:
+    resolution: {integrity: sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==}
    engines: {node: '>= 10'}
    cpu: [ia32]
    os: [win32]
@ -314,8 +314,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-x64-msvc@14.0.0:
-    resolution: {integrity: sha512-g6hLf1SUko+hnnaywQQZzzb3BRecQsoKkF3o/C+F+dOA4w/noVAJngUVkfwF0+2/8FzNznM7ofM6TGZO9svn7w==}
+  /@next/swc-win32-x64-msvc@14.0.1:
+    resolution: {integrity: sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]
@ -752,6 +752,11 @@ packages:

  /caniuse-lite@1.0.30001554:
    resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==}
+    dev: true
+
+  /caniuse-lite@1.0.30001587:
+    resolution: {integrity: sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==}
+    dev: false

  /chalk@2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@ -2204,8 +2209,8 @@ packages:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true

-  /next@14.0.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-J0jHKBJpB9zd4+c153sair0sz44mbaCHxggs8ryVXSFBuBqJ8XdE9/ozoV85xGh2VnSjahwntBZZgsihL9QznA==}
+  /next@14.0.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==}
    engines: {node: '>=18.17.0'}
    hasBin: true
    peerDependencies:
@ -2219,25 +2224,25 @@ packages:
      sass:
        optional: true
    dependencies:
-      '@next/env': 14.0.0
+      '@next/env': 14.0.1
      '@swc/helpers': 0.5.2
      busboy: 1.6.0
-      caniuse-lite: 1.0.30001554
+      caniuse-lite: 1.0.30001587
      postcss: 8.4.31
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
      styled-jsx: 5.1.1(react@18.2.0)
      watchpack: 2.4.0
    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.0.0
-      '@next/swc-darwin-x64': 14.0.0
-      '@next/swc-linux-arm64-gnu': 14.0.0
-      '@next/swc-linux-arm64-musl': 14.0.0
-      '@next/swc-linux-x64-gnu': 14.0.0
-      '@next/swc-linux-x64-musl': 14.0.0
-      '@next/swc-win32-arm64-msvc': 14.0.0
-      '@next/swc-win32-ia32-msvc': 14.0.0
-      '@next/swc-win32-x64-msvc': 14.0.0
+      '@next/swc-darwin-arm64': 14.0.1
+      '@next/swc-darwin-x64': 14.0.1
+      '@next/swc-linux-arm64-gnu': 14.0.1
+      '@next/swc-linux-arm64-musl': 14.0.1
+      '@next/swc-linux-x64-gnu': 14.0.1
+      '@next/swc-linux-x64-musl': 14.0.1
+      '@next/swc-win32-arm64-msvc': 14.0.1
+      '@next/swc-win32-ia32-msvc': 14.0.1
+      '@next/swc-win32-x64-msvc': 14.0.1
    transitivePeerDependencies:
      - '@babel/core'
      - babel-plugin-macros
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,11 +3,33 @@ const plugin = require('tailwindcss/plugin');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false,
  theme: {
    extend: {
-      fontFamily: {
-        sans: ['var(--font-geist-sans)']
+      colors: {
+        body: '#1B1B1B',
+        'futura-color': '#073B4C',
+        'custom-blue': '#0B80A7'
      },
+      fontFamily: {
+        'open-sans': ['Open Sans', 'sans-serif'], // add this line if not already present
+        futura: ['Futura', 'sans-serif']
+      },
+      fontSize: {
+        base: '1.5rem', // Tailwind's default for 'base' is 1rem, so you can name this size as you prefer
+        '2rem': '2rem'
+      },
+      fontWeight: {
+        normal: '400', // Tailwind's default 'normal' is '400'
+        extrabold: '800'
+      },
+      lineHeight: {
+        normal: '1.5' // 1.5 is the default value in Tailwind CSS for 'normal', you can adjust if necessary
+      },
+      letterSpacing: {
+        custom: '0.04rem'
+      },
+
      keyframes: {
        fadeIn: {
          from: { opacity: 0 },