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

initial setup

Browse Source 
navbar styling
This commit is contained in:
Zubair Mughal 2024-03-24 12:32:31 -05:00
parent 3a18f9a098
commit cfdc043a5f
14 changed files with 141 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.env.example
View File

@ -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"

6
.vscode/settings.json vendored
View File

@ -2,8 +2,8 @@
"typescript.tsdk": "node_modules/typescript/lib", "typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true, "typescript.enablePromptUseWorkspaceTsdk": true,
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll": true, "source.fixAll": "explicit",
"source.organizeImports": true, "source.organizeImports": "explicit",
"source.sortMembers": true "source.sortMembers": "explicit"
} }
} }

19
README.md
View File

@ -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. 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) - 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 ## Integrations
@ -61,16 +52,6 @@ pnpm dev
Your app should now be running on [localhost:3000](http://localhost:3000/). 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 ## 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. 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.

BIN
app/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

2
app/page.tsx
View File

@ -6,7 +6,7 @@ import { Suspense } from 'react';
export const runtime = 'edge'; export const runtime = 'edge';
export const metadata = { export const metadata = {
description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.', description: 'School Supplies Shopping',
openGraph: { openGraph: {
type: 'website' type: 'website'
} }

12
app/product/layout.tsx Normal file
View File

@ -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>
);
}

4
components/cart/open-cart.tsx
View File

@ -9,9 +9,9 @@ export default function OpenCart({
quantity?: number; quantity?: number;
}) { }) {
return ( 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 <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 ? ( {quantity ? (

9
components/icons/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

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

@ -6,49 +6,53 @@ 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() {
const menu = await getMenu('next-js-frontend-header-menu'); const menu = await getMenu('next-js-frontend-header-menu');
return ( return (
<nav className="relative flex items-center justify-between p-4 lg:px-6"> <header className="border-b border-[#E5E5E5] bg-white py-4">
<div className="block flex-none md:hidden"> <nav className="flex items-center justify-between px-4 sm:px-6 lg:px-8">
<MobileMenu menu={menu} /> <div className="block flex-none md:hidden">
</div> <MobileMenu menu={menu} />
<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>
<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 /> <Search />
</div> */}
<div className="flex justify-end md:w-2/3">
<Suspense fallback={<OpenCart />}>
<Cart />
</Suspense>
</div>
</div> </div>
<div className="flex justify-end md:w-1/3"> </nav>
<Suspense fallback={<OpenCart />}> </header>
<Cart />
</Suspense>
</div>
</div>
</nav>
); );
} }

25
components/logo-square.tsx
View File

@ -1,22 +1,15 @@
import clsx from 'clsx'; import Image from 'next/image';
import LogoIcon from './icons/logo'; import SKLogo from './icons/logo.svg';
export default function LogoSquare({ size }: { size?: 'sm' | undefined }) { export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
return ( return (
<div <div className={'flex items-center'}>
className={clsx( <Image
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black', src={SKLogo}
{ alt="Logo"
'h-[40px] w-[40px] rounded-xl': !size, width={size === 'sm' ? 10 : 50}
'h-[30px] w-[30px] rounded-lg': size === 'sm' height={size === 'sm' ? 10 : 50}
} layout="fixed"
)}
>
<LogoIcon
className={clsx({
'h-[16px] w-[16px]': !size,
'h-[10px] w-[10px]': size === 'sm'
})}
/> />
</div> </div>
); );

2
lib/constants.ts
View File

@ -28,4 +28,4 @@ export const TAGS = {
export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'; export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
export const DEFAULT_OPTION = 'Default Title'; 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';

2
package.json
View File

@ -26,7 +26,7 @@
"@heroicons/react": "^2.0.18", "@heroicons/react": "^2.0.18",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"geist": "^1.0.0", "geist": "^1.0.0",
"next": "14.0.0", "next": "14.0.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0" "react-dom": "18.2.0"
}, },

75
pnpm-lock.yaml generated
View File

@ -18,8 +18,8 @@ dependencies:
specifier: ^1.0.0 specifier: ^1.0.0
version: 1.0.0 version: 1.0.0
next: next:
specifier: 14.0.0 specifier: 14.0.1
version: 14.0.0(react-dom@18.2.0)(react@18.2.0) version: 14.0.1(react-dom@18.2.0)(react@18.2.0)
react: react:
specifier: 18.2.0 specifier: 18.2.0
version: 18.2.0 version: 18.2.0
@ -228,8 +228,8 @@ packages:
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15
dev: true dev: true
/@next/env@14.0.0: /@next/env@14.0.1:
resolution: {integrity: sha512-cIKhxkfVELB6hFjYsbtEeTus2mwrTC+JissfZYM0n+8Fv+g8ucUfOlm3VEDtwtwydZ0Nuauv3bl0qF82nnCAqA==} resolution: {integrity: sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==}
dev: false dev: false
/@next/eslint-plugin-next@14.0.0: /@next/eslint-plugin-next@14.0.0:
@ -242,8 +242,8 @@ packages:
resolution: {integrity: sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==} resolution: {integrity: sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==}
dev: false dev: false
/@next/swc-darwin-arm64@14.0.0: /@next/swc-darwin-arm64@14.0.1:
resolution: {integrity: sha512-HQKi159jCz4SRsPesVCiNN6tPSAFUkOuSkpJsqYTIlbHLKr1mD6be/J0TvWV6fwJekj81bZV9V/Tgx3C2HO9lA==} resolution: {integrity: sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
@ -251,8 +251,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-darwin-x64@14.0.0: /@next/swc-darwin-x64@14.0.1:
resolution: {integrity: sha512-4YyQLMSaCgX/kgC1jjF3s3xSoBnwHuDhnF6WA1DWNEYRsbOOPWjcYhv8TKhRe2ApdOam+VfQSffC4ZD+X4u1Cg==} resolution: {integrity: sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
@ -260,8 +260,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-arm64-gnu@14.0.0: /@next/swc-linux-arm64-gnu@14.0.1:
resolution: {integrity: sha512-io7fMkJ28Glj7SH8yvnlD6naIhRDnDxeE55CmpQkj3+uaA2Hko6WGY2pT5SzpQLTnGGnviK85cy8EJ2qsETj/g==} resolution: {integrity: sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
@ -269,8 +269,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-arm64-musl@14.0.0: /@next/swc-linux-arm64-musl@14.0.1:
resolution: {integrity: sha512-nC2h0l1Jt8LEzyQeSs/BKpXAMe0mnHIMykYALWaeddTqCv5UEN8nGO3BG8JAqW/Y8iutqJsaMe2A9itS0d/r8w==} resolution: {integrity: sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
@ -278,8 +278,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-x64-gnu@14.0.0: /@next/swc-linux-x64-gnu@14.0.1:
resolution: {integrity: sha512-Wf+WjXibJQ7hHXOdNOmSMW5bxeJHVf46Pwb3eLSD2L76NrytQlif9NH7JpHuFlYKCQGfKfgSYYre5rIfmnSwQw==} resolution: {integrity: sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
@ -287,8 +287,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-x64-musl@14.0.0: /@next/swc-linux-x64-musl@14.0.1:
resolution: {integrity: sha512-WTZb2G7B+CTsdigcJVkRxfcAIQj7Lf0ipPNRJ3vlSadU8f0CFGv/ST+sJwF5eSwIe6dxKoX0DG6OljDBaad+rg==} resolution: {integrity: sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
@ -296,8 +296,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-arm64-msvc@14.0.0: /@next/swc-win32-arm64-msvc@14.0.1:
resolution: {integrity: sha512-7R8/x6oQODmNpnWVW00rlWX90sIlwluJwcvMT6GXNIBOvEf01t3fBg0AGURNKdTJg2xNuP7TyLchCL7Lh2DTiw==} resolution: {integrity: sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
@ -305,8 +305,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-ia32-msvc@14.0.0: /@next/swc-win32-ia32-msvc@14.0.1:
resolution: {integrity: sha512-RLK1nELvhCnxaWPF07jGU4x3tjbyx2319q43loZELqF0+iJtKutZ+Lk8SVmf/KiJkYBc7Cragadz7hb3uQvz4g==} resolution: {integrity: sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
@ -314,8 +314,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-x64-msvc@14.0.0: /@next/swc-win32-x64-msvc@14.0.1:
resolution: {integrity: sha512-g6hLf1SUko+hnnaywQQZzzb3BRecQsoKkF3o/C+F+dOA4w/noVAJngUVkfwF0+2/8FzNznM7ofM6TGZO9svn7w==} resolution: {integrity: sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
@ -752,6 +752,11 @@ packages:
/caniuse-lite@1.0.30001554: /caniuse-lite@1.0.30001554:
resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==} resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==}
dev: true
/caniuse-lite@1.0.30001587:
resolution: {integrity: sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==}
dev: false
/chalk@2.4.2: /chalk@2.4.2:
resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@ -2204,8 +2209,8 @@ packages:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true dev: true
/next@14.0.0(react-dom@18.2.0)(react@18.2.0): /next@14.0.1(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-J0jHKBJpB9zd4+c153sair0sz44mbaCHxggs8ryVXSFBuBqJ8XdE9/ozoV85xGh2VnSjahwntBZZgsihL9QznA==} resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==}
engines: {node: '>=18.17.0'} engines: {node: '>=18.17.0'}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -2219,25 +2224,25 @@ packages:
sass: sass:
optional: true optional: true
dependencies: dependencies:
'@next/env': 14.0.0 '@next/env': 14.0.1
'@swc/helpers': 0.5.2 '@swc/helpers': 0.5.2
busboy: 1.6.0 busboy: 1.6.0
caniuse-lite: 1.0.30001554 caniuse-lite: 1.0.30001587
postcss: 8.4.31 postcss: 8.4.31
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
styled-jsx: 5.1.1(react@18.2.0) styled-jsx: 5.1.1(react@18.2.0)
watchpack: 2.4.0 watchpack: 2.4.0
optionalDependencies: optionalDependencies:
'@next/swc-darwin-arm64': 14.0.0 '@next/swc-darwin-arm64': 14.0.1
'@next/swc-darwin-x64': 14.0.0 '@next/swc-darwin-x64': 14.0.1
'@next/swc-linux-arm64-gnu': 14.0.0 '@next/swc-linux-arm64-gnu': 14.0.1
'@next/swc-linux-arm64-musl': 14.0.0 '@next/swc-linux-arm64-musl': 14.0.1
'@next/swc-linux-x64-gnu': 14.0.0 '@next/swc-linux-x64-gnu': 14.0.1
'@next/swc-linux-x64-musl': 14.0.0 '@next/swc-linux-x64-musl': 14.0.1
'@next/swc-win32-arm64-msvc': 14.0.0 '@next/swc-win32-arm64-msvc': 14.0.1
'@next/swc-win32-ia32-msvc': 14.0.0 '@next/swc-win32-ia32-msvc': 14.0.1
'@next/swc-win32-x64-msvc': 14.0.0 '@next/swc-win32-x64-msvc': 14.0.1
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
- babel-plugin-macros - babel-plugin-macros

26
tailwind.config.js
View File

@ -3,11 +3,33 @@ const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: { theme: {
extend: { extend: {
fontFamily: { colors: {
sans: ['var(--font-geist-sans)'] 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: { keyframes: {
fadeIn: { fadeIn: {
from: { opacity: 0 }, from: { opacity: 0 },