forked from crowetic/commerce
Dropdown Menu
This commit is contained in:
parent
7ebdd243a8
commit
9e7e5b02a2
@ -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">
|
||||||
© 2020 ACME, Inc. All rights reserved.
|
<span>© 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"
|
||||||
|
22
components/icon/DoubleChevron.tsx
Normal file
22
components/icon/DoubleChevron.tsx
Normal 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
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user