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

Image Slider

Browse Source
This commit is contained in:
Belen Curcio 2020-10-14 15:17:39 -03:00
parent 745adb1b02
commit cec45b3ab8
8 changed files with 147 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/product/ProductSlider/ProductSlider.tsx Normal file
View File

@ -0,0 +1,34 @@
import { FC, useState } from 'react'
import React from 'react'
import SwipeableViews from 'react-swipeable-views'
interface Props {
children?: any
}
const ProductSlider: FC<Props> = ({ children }) => {
const [idx, setIdx] = useState(0)
const count = React.Children.count(children)
const goBack = () => {
idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
}
const goNext = () => {
idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
}
return (
<div className="relative w-full h-full">
<div className="absolute flex flex-row inset-0 z-10 opacity-0">
<div className="flex-1 bg-cyan" onClick={goBack}></div>
<div className="flex-1 bg-pink" onClick={goNext}></div>
</div>
<SwipeableViews index={idx} onChangeIndex={setIdx}>
{children}
</SwipeableViews>
</div>
)
}
export default ProductSlider

1
components/product/ProductSlider/index.ts Normal file
View File

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

27
components/product/ProductView/ProductView.tsx
View File

@ -1,13 +1,13 @@
import cn from 'classnames'
import { NextSeo } from 'next-seo'
import { FC, useState } from 'react'
import s from './ProductView.module.css'
import { Button, Container } from '@components/ui'
import { Swatch } from '@components/product'
import { Colors } from '@components/ui/types'
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { useUI } from '@components/ui/context'
import { NextSeo } from 'next-seo'
import { Button, Container } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
interface Props {
className?: string
children?: any
@ -61,7 +61,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
],
}}
/>
<div className="relative flex flex-row items-start overflow-hidden fit my-12">
<div className="relative flex flex-row items-start fit my-12">
<div className="absolute top-0 left-0 z-50">
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
{product.name}
@ -72,13 +72,18 @@ const ProductView: FC<Props> = ({ product, className }) => {
{product.prices?.price.currencyCode}
</div>
</div>
<div className="flex-1 px-24 pb-0 relative fit overflow-hidden box-border">
<div className="flex-1 px-24 pb-0 relative fit box-border">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={product.images.edges?.[0]?.node.urlXL}
/>
<ProductSlider>
{product.images.edges?.map((image) => (
<img className="w-full object-cover" src={image?.node.urlXL} />
))}
</ProductSlider>
</div>
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
<div className={s.squareBg}></div>
</div>
<div className="flex-1 flex flex-col">

1
components/product/index.ts
View File

@ -1,3 +1,4 @@
export { default as Swatch } from './Swatch'
export { default as ProductView } from './ProductView'
export { default as ProductCard } from './ProductCard'
export { default as ProductSlider } from './ProductSlider'

2
package.json
View File

@ -35,6 +35,8 @@
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-merge-refs": "^1.1.0",
"react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^0.14.0-alpha.0",
"react-ticker": "^1.2.2",
"swr": "^0.3.3"
},

8
pages/_app.tsx
View File

@ -17,12 +17,8 @@ export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<link
rel="manifest"
href="/site.webmanifest"
importance="low"
key="site-manifest"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
</Head>
<DefaultSeo {...config.seo} />
<ThemeProvider>

BIN
public/slider-arrows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

93
yarn.lock
View File

@ -1009,7 +1009,14 @@
"@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-transform-typescript" "^7.10.4"
"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
"@babel/runtime@7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@ -5176,6 +5183,11 @@ jws@^3.2.2:
jwa "^1.4.1"
safe-buffer "^5.0.1"
keycode@^2.1.7:
version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
keyv@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@ -6608,7 +6620,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@15.7.2, prop-types@^15.6.2:
prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -6732,6 +6744,15 @@ react-dom@^16.13.1:
prop-types "^15.6.2"
scheduler "^0.19.1"
react-event-listener@^0.6.0:
version "0.6.6"
resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
dependencies:
"@babel/runtime" "^7.2.0"
prop-types "^15.6.0"
warning "^4.0.1"
react-icons@^3.11.0:
version "3.11.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
@ -6754,6 +6775,57 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-swipeable-views-core@^0.13.7:
version "0.13.7"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz#c082b553f26e83fd20fc17f934200eb717023c8a"
integrity sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==
dependencies:
"@babel/runtime" "7.0.0"
warning "^4.0.1"
react-swipeable-views-core@^0.14.0-alpha.0:
version "0.14.0-alpha.0"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0-alpha.0.tgz#1c40dd1c328c97048a8f2cb9de504ee611ae21dd"
integrity sha512-TQm58RJv01EseBfaeY0kZUIBmhs1NyKXwhJL52iN/UlzbQSiaIE2kk+mSGicUriBK0H7UlScgLeJR91AJ7SVcA==
dependencies:
"@babel/runtime" "7.0.0"
warning "^4.0.1"
react-swipeable-views-utils@^0.13.9:
version "0.13.9"
resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz#a66e98f2f4502d8b00182901f80d13b2f903e10f"
integrity sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==
dependencies:
"@babel/runtime" "7.0.0"
keycode "^2.1.7"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-swipeable-views-core "^0.13.7"
shallow-equal "^1.2.1"
react-swipeable-views-utils@^0.14.0-alpha.0:
version "0.14.0-alpha.0"
resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0-alpha.0.tgz#1bc91cf89d13417a0ca8edc11b4a2c55c4a889b9"
integrity sha512-Ya9Xtr4uE1CYxyrPwtcImzcZFcOr3PP51kRgIOTx3Dx9SF31OtF0t2CgXuypTYTs7G4StRE3NzWlvSBiMZSVtQ==
dependencies:
"@babel/runtime" "7.0.0"
keycode "^2.1.7"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-swipeable-views-core "^0.14.0-alpha.0"
shallow-equal "^1.2.1"
react-swipeable-views@^0.13.9:
version "0.13.9"
resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz#d6a6c508bf5288ad55509f9c65916db5df0f2cec"
integrity sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==
dependencies:
"@babel/runtime" "7.0.0"
prop-types "^15.5.4"
react-swipeable-views-core "^0.13.7"
react-swipeable-views-utils "^0.13.9"
warning "^4.0.1"
react-ticker@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
@ -6826,6 +6898,11 @@ regenerate@^1.4.0:
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==
regenerator-runtime@^0.12.0:
version "0.12.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
regenerator-runtime@^0.13.4:
version "0.13.7"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@ -7211,6 +7288,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
inherits "^2.0.1"
safe-buffer "^5.0.1"
shallow-equal@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
shell-quote@1.7.2:
version "1.7.2"
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
@ -7951,6 +8033,13 @@ vue-template-compiler@^2.6.12:
de-indent "^1.0.2"
he "^1.1.0"
warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watchpack@2.0.0-beta.13:
version "2.0.0-beta.13"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"