crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: fix product detail img

Browse Source
This commit is contained in:
lytrankieio123 2021-09-13 12:07:55 +07:00
parent 46233a1108
commit 829aeaa847
4 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss Normal file
View File

@ -0,0 +1,8 @@
.productImgItem {
@apply w-full h-full;
min-height: 30rem;
img {
object-fit: contain;
}
}

19
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react'
import { ImgWithLink } from 'src/components/common'
import s from './ProductImgItem.module.scss'
export interface ProductImgItemProps {
src: string
alt?: string
}
const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
return (
<section className={s.productImgItem}>
<ImgWithLink src={src} alt={alt} />
</section >
)
}
export default ProductImgItem

3
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
View File

@ -6,4 +6,7 @@
@screen lg {
max-width: 60rem;
}
> div {
width: 100%;
}
}

16
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CarouselCommon, ImgWithLink } from 'src/components/common'
import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
import { CarouselCommon } from 'src/components/common'
import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
import s from './ProductImgs.module.scss'
interface Props {
@ -9,6 +9,10 @@ interface Props {
}
const DATA = [
{
src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
alt: 'Meat',
},
{
src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
alt: 'Broccoli',
@ -21,15 +25,18 @@ const DATA = [
const option = {
slidesPerView: 1,
// mode: "free",
}
const ProductImgs = ({ }: Props) => {
return (
<section className={s.productImgs}>
<CarouselCommon<ImgWithLinkProps>
<CarouselCommon<ProductImgItemProps>
data={DATA}
itemKey="product-detail-img"
Component={ImgWithLink}
Component={ProductImgItem}
option={option}
isDot={true}
/>
@ -38,3 +45,4 @@ const ProductImgs = ({ }: Props) => {
}
export default ProductImgs