Adding Modal Component and Login View

components/core/UserNav/UserNav.module.css

@@ -2,12 +2,11 @@
 }
 
 .list {
-  @apply flex flex-row items-center;
+  @apply flex flex-row items-center h-full;
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
-
   &:hover {
     @apply text-accents-8;
   }

components/ui/Button/Button.module.css

@@ -20,3 +20,7 @@
 .loading {
   @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
+
+.slim {
+  @apply py-2 transform-none normal-case;
+}

components/ui/Button/Button.tsx

@@ -13,7 +13,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  variant?: 'flat' | 'slim'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
-    variant = 'filled',
+    variant = 'flat',
     children,
     active,
     onClick,
@@ -50,6 +50,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.slim]: variant === 'slim',
       [s.loading]: loading,
     },
     className
@@ -57,16 +58,16 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
 
   return (
     <Component
-      className={rootClassName}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
       {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+      className={rootClassName}
       style={{
         width,
         ...style,
       }}
-      data-active={isPressed ? '' : undefined}
     >
       {children}
       {loading && (

components/ui/Logo/Logo.tsx

@@ -1,12 +1,14 @@
-const Logo = () => (
+const Logo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
   >
-    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
+    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

components/ui/Modal/Modal.module.css

@@ -0,0 +1,8 @@
+.root {
+  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  @apply bg-white p-12;
+}

components/ui/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProvider,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { FocusScope } from '@react-aria/focus'
+
+interface Props {
+  className?: string
+  children?: any
+  show?: boolean
+  close: () => void
+}
+
+const Modal: FC<Props> = ({
+  className,
+  children,
+  show = true,
+  close,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  usePreventScroll()
+  let { modalProps } = useModal()
+  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog(props, ref)
+
+  return (
+    <div className={rootClassName}>
+      <FocusScope contain restoreFocus autoFocus>
+        <div
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          className={s.modal}
+        >
+          {children}
+        </div>
+      </FocusScope>
+    </div>
+  )
+}
+
+export default Modal

components/ui/Modal/index.ts

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

components/ui/index.ts

@@ -7,3 +7,4 @@ export { default as Marquee } from './Marquee'
 export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
+export { default as Modal } from './Modal'

lib/commerce/cart/use-cart.tsx

@@ -19,10 +19,12 @@ export default function useCart<T>(
   swrOptions?: ConfigInterface<T | null>
 ) {
   const { cartCookie } = useCommerce()
+
   const fetcher: typeof fetcherFn = (options, input, fetch) => {
     input.cartId = Cookies.get(cartCookie)
     return fetcherFn(options, input, fetch)
   }
+
   const response = useData(options, input, fetcher, swrOptions)
 
   return Object.assign(response, { isEmpty: true }) as CartResponse<T>

pages/index.tsx

@@ -28,7 +28,7 @@ export default function Home({
   return (
     <div className="mt-3">
       <Grid>
-        {featuredProducts.map((p: any) => (
+        {featuredProducts.slice(0, 3).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
@@ -48,12 +48,12 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {products.slice(3, 6).map((p: any) => (
+        {featuredProducts.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
       <Marquee>
-        {products.slice(0, 3).map((p: any) => (
+        {products.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} variant="slim" />
         ))}
       </Marquee>

pages/login.tsx

@@ -0,0 +1,40 @@
+import { Layout } from '@components/core'
+import { Logo, Modal, Button } from '@components/ui'
+
+export default function Login() {
+  return (
+    <div className="pb-20">
+      <Modal close={() => {}}>
+        <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
+          <div className="flex justify-center pb-12">
+            <Logo width="64px" height="64px" />
+          </div>
+          <div className="flex flex-col space-y-3">
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                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"
+              />
+            </div>
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                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"
+              />
+            </div>
+            <Button variant="slim">Log In</Button>
+            <span className="pt-3 text-center text-sm">
+              <span className="text-accents-7">Don't have an account?</span>
+              {` `}
+              <a className="text-accent-9 font-bold hover:underline cursor-pointer">
+                Sign Up
+              </a>
+            </span>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+Login.Layout = Layout