4
0
forked from crowetic/commerce

Dropdown Menu

This commit is contained in:
Belen Curcio 2020-10-22 16:47:58 -03:00
parent 7ebdd243a8
commit 9e7e5b02a2
4 changed files with 41 additions and 19 deletions

View File

@ -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-2 border-b border-accents-2 py-6"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12">
<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">
@ -33,8 +33,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
</Link> </Link>
</div> </div>
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
{' '} <ul className="flex flex-initial flex-col md:flex-1">
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/"> <Link href="/">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
@ -68,7 +67,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
</ul> </ul>
</div> </div>
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1"> <ul className="flex flex-initial flex-col md:flex-1">
{legalPages.map((page) => ( {legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
@ -80,18 +79,18 @@ const Footer: FC<Props> = ({ className, pages }) => {
))} ))}
</ul> </ul>
</div> </div>
<div className="col-span-1 lg:col-span-6 flex justify-end"> <div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
<div className="text-white"> <div>
<Github /> <Github />
</div> </div>
</div> </div>
</div> </div>
<div className="py-12 flex flex-row justify-between"> <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
<small className="text-white"> <div className="text-white">
&copy; 2020 ACME, Inc. All rights reserved. <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
</small> </div>
<div className="flex items-center text-accents-4"> <div className="flex items-center text-accents-4">
Crafted by <span>Crafted by</span>
<a href="https://vercel.com"> <a href="https://vercel.com">
<img <img
src="/vercel.png" src="/vercel.png"

View File

@ -0,0 +1,22 @@
const Sun = ({ ...props }) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
)
}
export default Sun

View File

@ -7,7 +7,7 @@
} }
.productDisplay { .productDisplay {
@apply relative flex px-0 pb-0 relative box-border col-span-7; @apply relative flex px-0 pb-0 relative box-border col-span-1;
margin-right: -2rem; margin-right: -2rem;
margin-left: -2rem; margin-left: -2rem;
min-height: 400px; min-height: 400px;
@ -17,7 +17,7 @@
} }
@screen lg { @screen lg {
@apply mx-0; @apply mx-0 col-span-7;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
} }
@ -55,9 +55,10 @@
} }
.sidebar { .sidebar {
@apply flex flex-col col-span-5; @apply flex flex-col col-span-1;
@screen lg { @screen lg {
@apply col-span-5;
padding-top: 5rem; padding-top: 5rem;
} }
} }

View File

@ -1,14 +1,14 @@
import cn from 'classnames'
import { NextSeo } from 'next-seo' import { NextSeo } from 'next-seo'
import s from './ProductView.module.css'
import { FC, useState, useEffect } from 'react' import { FC, useState, useEffect } from 'react'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui' import { Button, Container } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product' import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item' import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { getProductOptions } from '../helpers'
import s from './ProductView.module.css'
import { isDesktop } from '@lib/browser' import { isDesktop } from '@lib/browser'
import cn from 'classnames' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
@ -130,7 +130,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
))} ))}
<div className="pb-12"> <div className="pb-12">
<div <div
className="pb-14 break-words" className="pb-14 break-words w-full"
dangerouslySetInnerHTML={{ __html: product.description }} dangerouslySetInnerHTML={{ __html: product.description }}
/> />
<Button <Button