crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use next/image & fixes

Browse Source
This commit is contained in:
Catalin Pinte 2022-11-08 09:37:04 +02:00
parent 1ef5f14a0a
commit 7b6db0a6f0
10 changed files with 54 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/components/cart/CartItem/CartItem.tsx
View File

@ -1,6 +1,6 @@
import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
import { ChangeEvent, useEffect, useState } from 'react'
import cn from 'clsx'
import Image from 'next/legacy/image'
import Image from 'next/image'
import Link from 'next/link'
import s from './CartItem.module.css'
import { useUI } from '@components/ui/context'

2
site/components/common/I18nWidget/I18nWidget.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
import s from './I18nWidget.module.css'
import { Cross, ChevronUp } from '@components/icons'
import ClickOutside from '@lib/click-outside'
import Image from 'next/legacy/image'
import Image from 'next/image'
interface LOCALE_DATA {
name: string
img: {

11
site/components/product/ProductCard/ProductCard.module.css
View File

@ -7,7 +7,7 @@
.root:hover {
& .productImage {
transform: scale(1.2625);
transform: scale(1.1);
}
& .header .name span,
@ -69,16 +69,11 @@
}
.imageContainer {
@apply flex items-center justify-center overflow-hidden;
}
.imageContainer > div {
min-width: 100%;
@apply flex items-center justify-center overflow-hidden w-full h-full;
}
.imageContainer .productImage {
@apply transform transition-transform duration-500
object-cover scale-120;
@apply transform transition-transform duration-500 object-cover w-auto h-full;
}
.root .wishlistButton {

11
site/components/product/ProductCard/ProductCard.tsx
View File

@ -3,7 +3,7 @@ import cn from 'clsx'
import Link from 'next/link'
import type { Product } from '@commerce/types/product'
import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/legacy/image'
import Image, { ImageProps } from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton'
import usePrice from '@framework/product/use-price'
import ProductTag from '../ProductTag'
@ -49,17 +49,14 @@ const ProductCard: FC<Props> = ({
<span>{product.name}</span>
</div>
{product?.images && (
<div>
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
</div>
)}
</>
)}
@ -85,7 +82,6 @@ const ProductCard: FC<Props> = ({
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
@ -93,10 +89,8 @@ const ProductCard: FC<Props> = ({
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
@ -117,7 +111,6 @@ const ProductCard: FC<Props> = ({
/>
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
@ -125,10 +118,8 @@ const ProductCard: FC<Props> = ({
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>

2
site/components/product/ProductSidebar/ProductSidebar.module.css
View File

@ -50,7 +50,7 @@
}
.sliderContainer .img {
@apply w-full h-auto max-h-full object-cover;
@apply w-auto h-full max-h-full object-cover;
}
.button {

9
site/components/product/ProductSlider/ProductSlider.module.css
View File

@ -19,11 +19,11 @@
}
.thumb.selected {
@apply bg-white;
@apply bg-white/30;
}
.thumb img {
height: 85% !important;
@apply h-full w-full object-cover transition duration-500;
}
.album {
@ -44,10 +44,9 @@
}
@screen md {
.thumb:hover {
transform: scale(1.02);
.thumb:hover img {
@apply scale-110;
}
.album {
height: 182px;
}

8
site/components/product/ProductView/ProductView.module.css
View File

@ -17,15 +17,11 @@
}
.imageContainer {
@apply text-center h-full relative;
}
.imageContainer > span {
height: 100% !important;
@apply flex items-center justify-center w-full h-full relative;
}
.sliderContainer .img {
@apply w-full h-full max-h-full object-cover;
@apply object-cover h-full;
}
.button {

3
site/components/product/ProductView/ProductView.tsx
View File

@ -1,5 +1,5 @@
import cn from 'clsx'
import Image from 'next/legacy/image'
import Image from 'next/image'
import s from './ProductView.module.css'
import { FC } from 'react'
import type { Product } from '@commerce/types/product'
@ -80,6 +80,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
variant="simple"
className="animated fadeIn"
imgProps={{
alt: p.name,
width: 300,
height: 300,
}}

11
site/components/search.tsx
View File

@ -125,6 +125,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
>
<Link
href={{ pathname: getCategoryPath('', brand), query }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@ -151,6 +152,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getCategoryPath(cat.path, brand),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@ -226,6 +228,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath('', category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@ -252,6 +255,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath(path, category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@ -326,6 +330,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
imgProps={{
width: 480,
height: 480,
alt: product.name,
}}
/>
))}
@ -390,7 +395,10 @@ export default function Search({ categories, brands }: SearchPropsType) {
}
)}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<Link
href={{ pathname, query: filterQuery({ q }) }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}
className={
@ -416,6 +424,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname,
query: filterQuery({ q, sort: key }),
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}

2
site/pages/index.tsx
View File

@ -46,6 +46,7 @@ export default function Home({
key={product.id}
product={product}
imgProps={{
alt: product.name,
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
priority: true,
@ -68,6 +69,7 @@ export default function Home({
key={product.id}
product={product}
imgProps={{
alt: product.name,
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
}}