crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-13 03:50:20 -05:00
commit d561f26beb
18 changed files with 135 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
assets/global.css
View File

@ -1,155 +1,17 @@
@import './font.css';
:root {
/* Spacing variables */
--geist-space: 4px;
--geist-space-2x: 8px;
--geist-space-4x: 16px;
--geist-space-8x: 32px;
--geist-space-16x: 64px;
--geist-space-24x: 96px;
--geist-space-32x: 128px;
--geist-space-48x: 192px;
--geist-space-64x: 256px;
--bg-primary: white;
--bg-secondary: black;
--text-primary: black;
--text-secondary: #252f3f;
}
--geist-space-small: 32px;
--geist-space-medium: 40px;
--geist-space-large: 48px;
--geist-space-gap: 24px;
--geist-space-gap-half: 12px;
--geist-space-gap-quarter: var(--geist-space-2x);
--geist-gap: var(--geist-space-gap);
--geist-gap-half: var(--geist-space-gap-half);
--geist-gap-quarter: var(--geist-space-gap-quarter);
--geist-gap-double: var(--geist-space-large);
/* Negative values */
--geist-space-negative: -4px;
--geist-space-2x-negative: -8px;
--geist-space-4x-negative: -16px;
--geist-space-8x-negative: -32px;
--geist-space-16x-negative: -64px;
--geist-space-24x-negative: -96px;
--geist-space-32x-negative: -128px;
--geist-space-48x-negative: -192px;
--geist-space-64x-negative: -256px;
--geist-space-small-negative: -32px;
--geist-space-medium-negative: -40px;
--geist-space-large-negative: -48px;
--geist-space-gap-negative: -24px;
--geist-space-gap-half-negative: -12px;
--geist-space-gap-quarter-negative: var(--geist-space-2x-negative);
--geist-gap-negative: var(--geist-space-gap-negative);
--geist-gap-half-negative: var(--geist-space-gap-half-negative);
--geist-gap-quarter-negative: var(--geist-space-gap-quarter-negative);
--geist-gap-double-negative: var(--geist-space-large-negative);
/* Page values */
--geist-page-margin: var(--geist-space-gap);
--geist-page-width: 1000px;
--geist-page-width-with-margin: 1048px; /* 1000px + (2 * page margin) */
/* Appearance */
--geist-radius: 5px;
--geist-marketing-radius: 8px;
/* Fonts */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
--font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
/* Header */
--header-height: 64px;
--header-border-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
--header-background: rgba(255, 255, 255, 0.8);
/* Form sizing */
--geist-form-large-font: 1rem;
--geist-form-large-line-height: 1.5rem;
--geist-form-large-height: var(--geist-space-large);
--geist-form-small-font: 0.875rem;
--geist-form-small-line-height: 0.875rem;
--geist-form-small-height: var(--geist-space-small);
--geist-form-font: 0.875rem;
--geist-form-line-height: 1.25rem;
--geist-form-height: var(--geist-space-medium);
--geist-success-lighter: #d3e5ff;
--geist-success-light: #3291ff;
--geist-success: #0070f3;
--geist-success-dark: #0761d1;
--geist-error-lighter: #f7d4d6;
--geist-error-light: #ff1a1a;
--geist-error: #ee0000;
--geist-error-dark: #c50000;
--geist-warning-lighter: #ffefcf;
--geist-warning-light: #f7b955;
--geist-warning: #f5a623;
--geist-warning-dark: #ab570a;
--geist-violet-lighter: #e3d7fc;
--geist-violet-light: #8a63d2;
--geist-violet: #7928ca;
--geist-violet-dark: #4c2889;
--geist-cyan-lighter: #aaffec;
--geist-cyan-light: #79ffe1;
--geist-cyan: #50e3c2;
--geist-cyan-dark: #29bc9b;
--geist-highlight-purple: #f81ce5;
--geist-highlight-magenta: #eb367f;
--geist-highlight-pink: #ff0080;
--geist-foreground: #000;
--geist-background: #fff;
--geist-selection: var(--geist-cyan-light);
--accents-1: #fafafa;
--accents-2: #eaeaea;
--accents-3: #999999;
--accents-4: #888888;
--accents-5: #666666;
--accents-6: #444444;
--accents-7: #333333;
--accents-8: #111111;
--geist-link-color: var(--geist-success);
--geist-marketing-gray: #fafbfc;
--geist-code: var(--geist-highlight-purple);
/* Secondary (Gray) */
--geist-secondary-lighter: var(--accents-2);
--geist-secondary-light: var(--accents-3);
--geist-secondary: var(--accents-5);
--geist-secondary-dark: var(--accents-7);
/* Shadows and other values */
--dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02);
--dropdown-triangle-stroke: #fff;
--scroller-start: rgba(255, 255, 255, 1);
--scroller-end: rgba(255, 255, 255, 0);
--shadow-smallest: 0px 4px 8px rgba(0, 0, 0, 0.12);
--shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
--shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
--portal-opacity: 0.25;
[data-theme='dark'] {
--bg-primary: black;
--bg-secondary: white;
--text-primary: white;
--text-secondary: white;
}
*,
@ -174,9 +36,8 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--geist-background);
color: var(--geist-foreground);
scroll-padding-top: var(--header-height);
background-color: var(--bg-primary);
color: var(--text-primary);
}
body {

2
components/core/Layout/Layout.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply h-full;
@apply h-full bg-primary;
}
.main {

2
components/core/Navbar/Navbar.module.css
View File

@ -1,3 +1,3 @@
.link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer;
@apply group text-primary inline-flex items-center text-base leading-6 font-medium hover:text-secondary focus:outline-none focus:text-secondary transition ease-in-out duration-100 cursor-pointer;
}

17
components/core/Navbar/Navbar.tsx
View File

@ -1,15 +1,16 @@
import { FC } from 'react'
import s from './Navbar.module.css'
import { Logo, Container } from '@components/ui'
import { Searchbar } from '@components/core'
import { UserNav } from '@components/core'
import { FC } from 'react'
import Link from 'next/link'
import { useTheme } from 'next-themes'
import { Logo, Container } from '@components/ui'
import { Searchbar, Toggle, UserNav } from '@components/core'
interface Props {
className?: string
}
const Navbar: FC<Props> = ({ className }) => {
const rootClassName = className
const { theme, setTheme } = useTheme()
return (
<div className={rootClassName}>
<Container>
@ -37,7 +38,13 @@ const Navbar: FC<Props> = ({ className }) => {
<Searchbar />
</div>
<div className="flex flex-initial md:flex-1 justify-end">
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
</div>

2
components/core/Toggle/Toggle.module.css Normal file
View File

@ -0,0 +1,2 @@
.root {
}

51
components/core/Toggle/Toggle.tsx Normal file
View File

@ -0,0 +1,51 @@
import React, { FC } from 'react'
import { Switch } from '@headlessui/react'
import { HiSun, HiMoon } from 'react-icons/hi'
interface Props {
className?: string
checked: boolean
onChange: any
}
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
return (
<Switch checked={checked} onChange={onChange}>
<span
role="checkbox"
aria-checked="false"
tabIndex={0}
className={`${
checked ? 'bg-gray-800' : 'bg-gray-200'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
>
<span
aria-hidden="true"
className={`${
checked ? 'translate-x-5' : 'translate-x-0'
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
>
<span
className={`${
checked
? 'opacity-0 ease-out duration-100'
: 'opacity-100 ease-in duration-200'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiSun className="h-3 w-3 text-gray-400" />
</span>
<span
className={`${
checked
? 'opacity-100 ease-in duration-200'
: 'opacity-0 ease-out duration-100'
} opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiMoon className="h-3 w-3 text-yellow-400" />
</span>
</span>
</span>
</Switch>
)
}
export default Toggle

1
components/core/Toggle/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Toggle'

4
components/core/UserNav/UserNav.module.css
View File

@ -6,10 +6,10 @@
}
.item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100;
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary;
&:hover {
@apply text-gray-500;
@apply text-secondary;
}
&:last-child {

1
components/core/index.ts
View File

@ -5,3 +5,4 @@ export { default as Layout } from './Layout'
export { default as Navbar } from './Navbar'
export { default as Searchbar } from './Searchbar'
export { default as UserNav } from './UserNav'
export { default as Toggle } from './Toggle'

8
components/product/ProductCard/ProductCard.module.css
View File

@ -62,11 +62,11 @@
}
.squareBg {
@apply transform absolute inset-0 z-0 bg-black;
@apply transform absolute inset-0 z-0 bg-secondary;
}
.productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-xl truncate leading-8 inline-flex;
@apply p-3 h-14 bg-primary text-primary font-bold text-xl truncate leading-8 inline-flex;
max-width: calc(100% - 50px);
@screen lg {
@ -75,9 +75,9 @@
}
.productPrice {
@apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6;
@apply px-3 py-1 pb-2 bg-primary text-primary font-semibold inline-block text-sm leading-6;
}
.wishlistButton {
@apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-xs leading-6 cursor-pointer;
@apply w-10 h-10 flex items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
}

2
components/product/Swatch/Swatch.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply h-12 w-12 bg-white text-black rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
@apply h-12 w-12 bg-white text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
}
.active.size {

2
components/ui/Sidebar/Sidebar.tsx
View File

@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-md">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
<div className="h-full flex flex-col text-primary bg-primary shadow-xl overflow-y-auto">
{children}
</div>
</div>

2
package.json
View File

@ -27,10 +27,12 @@
"lodash": "^4.17.20",
"lodash.debounce": "^4.0.8",
"next": "^9.5.4",
"next-themes": "^0.0.4",
"postcss-nesting": "^7.0.1",
"react": "^16.13.1",
"react-aria": "^3.0.0",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"swr": "^0.3.3"

17
pages/_app.tsx
View File

@ -1,6 +1,7 @@
import { FC } from 'react'
import type { AppProps } from 'next/app'
import { SSRProvider, OverlayProvider } from 'react-aria'
import { ThemeProvider } from 'next-themes'
import '@assets/global.css'
import '@assets/tailwind.css'
import '@assets/utils.css'
@ -11,12 +12,14 @@ export default function MyApp({ Component, pageProps }: AppProps) {
const Layout = (Component as any).Layout || Noop
return (
<SSRProvider>
<OverlayProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</OverlayProvider>
</SSRProvider>
<ThemeProvider>
<SSRProvider>
<OverlayProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</OverlayProvider>
</SSRProvider>
</ThemeProvider>
)
}

8
pages/index.tsx
View File

@ -45,21 +45,21 @@ export default function Home({
<div className="py-12 flex flex-row w-full">
<div className="pr-3 w-48">
<ul className="mb-10">
<li className="py-1 text-black font-bold tracking-wide">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-gray-800">
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-black font-bold tracking-wide">
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-gray-800">
<li key={node.path} className="py-1 text-secondary">
<a href="#">{node.name}</a>
</li>
))}

20
pages/search.tsx
View File

@ -30,21 +30,21 @@ export default function Home({
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-black font-bold tracking-wide">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-gray-800">
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
<ul>
<li className="py-1 text-black font-bold tracking-wide">
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-gray-800">
<li key={node.path} className="py-1 text-secondary">
<a href="#">{node.name}</a>
</li>
))}
@ -66,11 +66,13 @@ export default function Home({
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-black font-bold tracking-wide">Relevance</li>
<li className="py-1 text-gray-800">Latest arrivals</li>
<li className="py-1 text-gray-800">Trending</li>
<li className="py-1 text-gray-800">Price: Low to high</li>
<li className="py-1 text-gray-800">Price: High to low</li>
<li className="py-1 text-primary font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
</ul>
</div>
</div>

11
tailwind.config.js
View File

@ -19,10 +19,13 @@ module.exports = {
blue: '#0070F3',
green: '#37B679',
red: '#DA3C3C',
primary: '#000',
textColor: {
primary: '#FFF',
},
primary: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)',
},
textColor: {
base: 'var(--text-primary)',
primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)',
},
},
},

12
yarn.lock
View File

@ -5676,6 +5676,11 @@ neo-async@^2.6.2:
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
next-themes@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.4.tgz#fb06a9d03887201dd8fdd75fc1c84f406988f61e"
integrity sha512-j0bJJ6INanFsniCL31j1ZhjNaoqIFOaTeiUakbGpGxDz4+318Zp2ZfaorSjpUhzDWbXBKA3ZDE0DSUVWJ/8EsA==
next-tick@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@ -6710,6 +6715,13 @@ react-dom@^16.13.1:
prop-types "^15.6.2"
scheduler "^0.19.1"
react-icons@^3.11.0:
version "3.11.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
dependencies:
camelcase "^5.0.0"
react-is@16.13.1, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"