forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
2eebfcbf3b
@ -17,9 +17,12 @@
|
|||||||
--red: #da3c3c;
|
--red: #da3c3c;
|
||||||
--pink: #e64980;
|
--pink: #e64980;
|
||||||
--purple: #f81ce5;
|
--purple: #f81ce5;
|
||||||
--violet: #5f3dc4;
|
|
||||||
--blue: #0070f3;
|
--blue: #0070f3;
|
||||||
|
|
||||||
|
--violet-light: #7048e8;
|
||||||
|
--violet: #5f3dc4;
|
||||||
|
|
||||||
--accents-0: #f8f9fa;
|
--accents-0: #f8f9fa;
|
||||||
--accents-1: #f1f3f5;
|
--accents-1: #f1f3f5;
|
||||||
--accents-2: #e9ecef;
|
--accents-2: #e9ecef;
|
||||||
|
@ -4,7 +4,7 @@ import Link from 'next/link'
|
|||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import getSlug from '@utils/get-slug'
|
import getSlug from '@utils/get-slug'
|
||||||
import { Logo, Container } from '@components/ui'
|
import { Logo, Container } from '@components/ui'
|
||||||
import { Github } from '@components/icon'
|
import { Github, DoubleChevron } from '@components/icon'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
return (
|
return (
|
||||||
<footer className={rootClassName}>
|
<footer className={rootClassName}>
|
||||||
<Container>
|
<Container>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12">
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
|
||||||
<div className="col-span-1 lg:col-span-2">
|
<div className="col-span-1 lg:col-span-2">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="flex flex-initial items-center font-bold md:mr-24">
|
<a className="flex flex-initial items-center font-bold md:mr-24">
|
||||||
@ -79,14 +79,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
|
<div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
|
||||||
<div>
|
<div className="flex space-x-6 items-center h-10">
|
||||||
<Github />
|
<Github />
|
||||||
|
<div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
|
||||||
|
<img className="" src="/flag-us.png" />
|
||||||
|
<span>English</span>
|
||||||
|
<span className="">
|
||||||
|
<DoubleChevron />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
|
<div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
|
||||||
<div className="text-white">
|
<div>
|
||||||
<span>© 2020 ACME, Inc. All rights reserved.</span>
|
<span>© 2020 ACME, Inc. All rights reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center text-accents-4">
|
<div className="flex items-center text-accents-4">
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
const Sun = ({ ...props }) => {
|
const DoubleChevron = ({ ...props }) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
width="24"
|
||||||
@ -19,4 +19,4 @@ const Sun = ({ ...props }) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Sun
|
export default DoubleChevron
|
||||||
|
@ -9,3 +9,4 @@ export { default as Check } from './Check'
|
|||||||
export { default as Sun } from './Sun'
|
export { default as Sun } from './Sun'
|
||||||
export { default as Moon } from './Moon'
|
export { default as Moon } from './Moon'
|
||||||
export { default as Github } from './Github'
|
export { default as Github } from './Github'
|
||||||
|
export { default as DoubleChevron } from './DoubleChevron'
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productDisplay {
|
.productDisplay {
|
||||||
@apply relative flex px-0 pb-0 relative box-border col-span-1;
|
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
|
||||||
margin-right: -2rem;
|
margin-right: -2rem;
|
||||||
margin-left: -2rem;
|
margin-left: -2rem;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
@ -34,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nameBox {
|
.nameBox {
|
||||||
@apply absolute top-6 left-0 z-10;
|
@apply absolute top-6 left-10 z-10;
|
||||||
|
|
||||||
& .name {
|
& .name {
|
||||||
@apply px-6 py-2 bg-primary text-primary font-bold;
|
@apply px-6 py-2 bg-primary text-primary font-bold;
|
||||||
@ -49,7 +49,7 @@
|
|||||||
@screen md {
|
@screen md {
|
||||||
& .name,
|
& .name,
|
||||||
& .price {
|
& .price {
|
||||||
@apply bg-violet text-white;
|
@apply bg-violet-light text-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -76,13 +76,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
height: 150%;
|
height: 100%;
|
||||||
margin-top: -10%;
|
margin-top: -8%;
|
||||||
}
|
|
||||||
|
|
||||||
@screen xl {
|
|
||||||
height: 170%;
|
|
||||||
margin-top: -19%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -66,7 +66,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
/>
|
/>
|
||||||
<div className={cn(s.root, 'fit')}>
|
<div className={cn(s.root, 'fit')}>
|
||||||
<div className={cn(s.productDisplay, 'fit')}>
|
<div className={cn(s.productDisplay, 'fit')}>
|
||||||
<div className={s.squareBg}></div>
|
|
||||||
<div className={s.nameBox}>
|
<div className={s.nameBox}>
|
||||||
<h1 className={s.name}>{product.name}</h1>
|
<h1 className={s.name}>{product.name}</h1>
|
||||||
<div className={s.price}>
|
<div className={s.price}>
|
||||||
|
@ -8,7 +8,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
||||||
const rootClassName = cn('mx-auto max-w-7xl px-6', className)
|
const rootClassName = cn('mx-auto max-w-8xl px-12', className)
|
||||||
|
|
||||||
let Component: React.ComponentType<React.HTMLAttributes<
|
let Component: React.ComponentType<React.HTMLAttributes<
|
||||||
HTMLDivElement
|
HTMLDivElement
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply fixed bg-black flex items-center inset-0 z-50 justify-center;
|
@apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
|
||||||
background-color: rgba(0, 0, 0, 0.35);
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
@apply bg-white p-12;
|
@apply bg-primary p-12 border border-accents-2;
|
||||||
}
|
}
|
||||||
|
@ -21,11 +21,14 @@ const Modal: FC<Props> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
||||||
usePreventScroll()
|
|
||||||
let { modalProps } = useModal()
|
let { modalProps } = useModal()
|
||||||
let { overlayProps } = useOverlay(props, ref)
|
let { overlayProps } = useOverlay(props, ref)
|
||||||
let { dialogProps } = useDialog(props, ref)
|
let { dialogProps } = useDialog(props, ref)
|
||||||
|
|
||||||
|
usePreventScroll({
|
||||||
|
isDisabled: !show,
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
<FocusScope contain restoreFocus autoFocus>
|
<FocusScope contain restoreFocus autoFocus>
|
||||||
|
@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
|
|||||||
leaveFrom="translate-x-0"
|
leaveFrom="translate-x-0"
|
||||||
leaveTo="translate-x-full"
|
leaveTo="translate-x-full"
|
||||||
>
|
>
|
||||||
<div className="h-full w-screen max-w-lg">
|
<div className="h-full w-screen max-w-xl">
|
||||||
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
|
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
@ -70,7 +70,7 @@ export default function Home({
|
|||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Marquee variant="secondary">
|
<Marquee variant="secondary">
|
||||||
{bestSelling.slice(0, 3).map(({ node }) => (
|
{bestSelling.slice(3, 6).map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} variant="slim" />
|
<ProductCard key={node.path} product={node} variant="slim" />
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
|
@ -28,20 +28,20 @@ export default function Login() {
|
|||||||
<div className="pb-20">
|
<div className="pb-20">
|
||||||
<Modal close={() => {}}>
|
<Modal close={() => {}}>
|
||||||
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
||||||
<div className="flex justify-center pb-12">
|
<div className="flex justify-center pb-12 ">
|
||||||
<Logo width="64px" height="64px" />
|
<Logo width="64px" height="64px" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-3">
|
<div className="flex flex-col space-y-3">
|
||||||
<div className="border border-accents-3 text-accents-6">
|
<div className="border border-accents-3 text-accents-6">
|
||||||
<input
|
<input
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="border border-accents-3 text-accents-6">
|
<div className="border border-accents-3 text-accents-6">
|
||||||
<input
|
<input
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="slim" onClick={handleSignup}>
|
<Button variant="slim" onClick={handleSignup}>
|
||||||
|
Before Width: | Height: | Size: 762 B After Width: | Height: | Size: 762 B |
@ -6,6 +6,9 @@ module.exports = {
|
|||||||
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
|
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
maxWidth: {
|
||||||
|
'8xl': '1920px',
|
||||||
|
},
|
||||||
backgroundOpacity: {
|
backgroundOpacity: {
|
||||||
075: '0.75',
|
075: '0.75',
|
||||||
},
|
},
|
||||||
@ -26,6 +29,7 @@ module.exports = {
|
|||||||
'accents-8': 'var(--accents-8)',
|
'accents-8': 'var(--accents-8)',
|
||||||
'accents-9': 'var(--accents-9)',
|
'accents-9': 'var(--accents-9)',
|
||||||
violet: 'var(--violet)',
|
violet: 'var(--violet)',
|
||||||
|
'violet-light': 'var(--violet-light)',
|
||||||
pink: 'var(--pink)',
|
pink: 'var(--pink)',
|
||||||
cyan: 'var(--cyan)',
|
cyan: 'var(--cyan)',
|
||||||
blue: 'var(--blue)',
|
blue: 'var(--blue)',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user