summaryrefslogtreecommitdiff
path: root/src-migrate/modules
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules')
-rw-r--r--src-migrate/modules/product-card/components/ProductCard.tsx176
-rw-r--r--src-migrate/modules/product-detail/components/Image.tsx118
2 files changed, 152 insertions, 142 deletions
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 0febfadb..a439cdc8 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,95 +1,108 @@
-import style from '../styles/product-card.module.css'
+import style from '../styles/product-card.module.css';
import ImageNext from 'next/image';
-import clsx from 'clsx'
-import Link from 'next/link'
-import React, { useEffect, useMemo, useState } from 'react'
-import Image from '~/components/ui/image'
-import useUtmSource from '~/hooks/useUtmSource'
-import clsxm from '~/libs/clsxm'
-import formatCurrency from '~/libs/formatCurrency'
-import { formatToShortText } from '~/libs/formatNumber'
-import { createSlug } from '~/libs/slug'
-import { IProduct } from '~/types/product'
-
+import clsx from 'clsx';
+import Link from 'next/link';
+import React, { useEffect, useMemo, useState } from 'react';
+import Image from '~/components/ui/image';
+import useUtmSource from '~/hooks/useUtmSource';
+import clsxm from '~/libs/clsxm';
+import formatCurrency from '~/libs/formatCurrency';
+import { formatToShortText } from '~/libs/formatNumber';
+import { createSlug } from '~/libs/slug';
+import { IProduct } from '~/types/product';
+import useDevice from '@/core/hooks/useDevice';
type Props = {
- product: IProduct
- layout?: 'vertical' | 'horizontal'
-}
+ product: IProduct;
+ layout?: 'vertical' | 'horizontal';
+};
const ProductCard = ({ product, layout = 'vertical' }: Props) => {
- const utmSource = useUtmSource()
-
+ const utmSource = useUtmSource();
+ const { isDesktop, isMobile } = useDevice();
const URL = {
- product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
- manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
- }
+ product:
+ createSlug('/shop/product/', product.name, product.id.toString()) +
+ `?utm_source=${utmSource}`,
+ manufacture: createSlug(
+ '/shop/brands/',
+ product.manufacture.name,
+ product.manufacture.id.toString()
+ ),
+ };
const image = useMemo(() => {
- if (product.image) return product.image + '?ratio=square'
- return '/images/noimage.jpeg'
- }, [product.image])
+ if (!isDesktop && product.image_mobile) {
+ return product.image_mobile + '?ratio=square';
+ } else {
+ if (product.image) return product.image + '?ratio=square';
+ return '/images/noimage.jpeg';
+ }
+ }, [product.image, product.image_mobile]);
return (
- <div className={clsxm(style['wrapper'], {
- [style['wrapper-v']]: layout === 'vertical',
- [style['wrapper-h']]: layout === 'horizontal',
- })}
+ <div
+ className={clsxm(style['wrapper'], {
+ [style['wrapper-v']]: layout === 'vertical',
+ [style['wrapper-h']]: layout === 'horizontal',
+ })}
>
- <div className={clsxm('relative', {
- [style['image-v']]: layout === 'vertical',
- [style['image-h']]: layout === 'horizontal',
- })}>
+ <div
+ className={clsxm('relative', {
+ [style['image-v']]: layout === 'vertical',
+ [style['image-h']]: layout === 'horizontal',
+ })}
+ >
<Link href={URL.product}>
-
- <div className="relative">
- <Image
- src={image}
- alt={product.name}
- width={128}
- height={128}
- className='object-contain object-center h-full w-full'
- />
- <div className="absolute top-0 right-0 flex mt-2">
- <div className="gambarB ">
- {product.isSni && (
- <ImageNext
- src="/images/sni-logo.png"
- alt="SNI Logo"
- className="w-3 h-4 object-contain object-top sm:h-4"
- width={50}
- height={50}
- />
- )}
- </div>
- <div className="gambarC ">
- {product.isTkdn && (
- <ImageNext
- src="/images/TKDN.png"
- alt="TKDN"
- className="w-5 h-4 object-contain object-top ml-1 mr-1 sm:h-6"
- width={50}
- height={50}
- />
- )}
+ <div className='relative'>
+ <Image
+ src={image}
+ alt={product.name}
+ width={128}
+ height={128}
+ className='object-contain object-center h-full w-full'
+ />
+ <div className='absolute top-0 right-0 flex mt-2'>
+ <div className='gambarB '>
+ {product.isSni && (
+ <ImageNext
+ src='/images/sni-logo.png'
+ alt='SNI Logo'
+ className='w-3 h-4 object-contain object-top sm:h-4'
+ width={50}
+ height={50}
+ />
+ )}
+ </div>
+ <div className='gambarC '>
+ {product.isTkdn && (
+ <ImageNext
+ src='/images/TKDN.png'
+ alt='TKDN'
+ className='w-5 h-4 object-contain object-top ml-1 mr-1 sm:h-6'
+ width={50}
+ height={50}
+ />
+ )}
+ </div>
</div>
</div>
- </div>
{product.variant_total > 1 && (
- <div className={style['variant-badge']}>{product.variant_total} Varian</div>
+ <div className={style['variant-badge']}>
+ {product.variant_total} Varian
+ </div>
)}
</Link>
</div>
- <div className={clsxm({
- [style['content-v']]: layout === 'vertical',
- [style['content-h']]: layout === 'horizontal',
- })}>
- <Link
- href={URL.manufacture}
- className={style['brand']}
- >
+ <div
+ className={clsxm({
+ [style['content-v']]: layout === 'vertical',
+ [style['content-h']]: layout === 'horizontal',
+ })}
+ >
+ <Link href={URL.manufacture} className={style['brand']}>
{product.manufacture.name}
</Link>
@@ -113,17 +126,15 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
<div className='h-1.5' />
<div className={style['price-inc']}>
- Inc PPN:
- Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+ Inc PPN: Rp{' '}
+ {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
</div>
<div className='h-1' />
<div className='flex items-center gap-x-2.5'>
{product.stock_total > 0 && (
- <div className={style['ready-stock']}>
- Ready Stock
- </div>
+ <div className={style['ready-stock']}>Ready Stock</div>
)}
{product.qty_sold > 0 && (
<div className={style['sold']}>
@@ -131,14 +142,11 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
</div>
)}
</div>
-
</div>
</div>
- )
-}
-
-const classPrefix = ({ layout }: Props) => {
+ );
+};
-}
+const classPrefix = ({ layout }: Props) => {};
-export default ProductCard \ No newline at end of file
+export default ProductCard;
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 30ca0d34..96ae2027 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,22 +1,22 @@
import style from '../styles/image.module.css';
import ImageNext from 'next/image';
-import React, { useEffect, useMemo, useState } from 'react'
-import { InfoIcon } from 'lucide-react'
-import { Tooltip } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useState } from 'react';
+import { InfoIcon } from 'lucide-react';
+import { Tooltip } from '@chakra-ui/react';
-import { IProductDetail } from '~/types/product'
-import ImageUI from '~/components/ui/image'
+import { IProductDetail } from '~/types/product';
+import ImageUI from '~/components/ui/image';
import moment from 'moment';
-
+import useDevice from '@/core/hooks/useDevice';
type Props = {
- product: IProductDetail
-}
+ product: IProductDetail;
+};
const Image = ({ product }: Props) => {
- const flashSale = product.flash_sale
+ const flashSale = product.flash_sale;
const [count, setCount] = useState(flashSale?.remaining_time || 0);
-
+ const { isDesktop, isMobile } = useDevice();
useEffect(() => {
let interval: NodeJS.Timeout;
@@ -34,59 +34,60 @@ const Image = ({ product }: Props) => {
};
}, [flashSale?.remaining_time]);
- const duration = moment.duration(count, 'seconds')
-
+ const duration = moment.duration(count, 'seconds');
const image = useMemo(() => {
- if (product.image) return product.image + '?ratio=square'
- return '/images/noimage.jpeg'
- }, [product.image])
+ if (!isDesktop && product.image_mobile) {
+ return product.image_mobile + '?ratio=square';
+ } else {
+ if (product.image) return product.image + '?ratio=square';
+ return '/images/noimage.jpeg';
+ }
+ }, [product.image, product.image_mobile]);
return (
<div className={style['wrapper']}>
{/* <div className="relative"> */}
- <ImageUI
- src={image}
- alt={product.name}
- width={256}
- height={256}
- className={style['image']}
- loading='eager'
- priority
- />
- <div className="absolute top-4 right-10 flex ">
- <div className="gambarB ">
- {product.isSni && (
- <ImageNext
- src="/images/sni-logo.png"
- alt="SNI Logo"
- className="w-12 h-8 object-contain object-top sm:h-6"
- width={50}
- height={50}
- />
- )}
- </div>
- <div className="gambarC ">
- {product.isTkdn && (
- <ImageNext
- src="/images/TKDN.png"
- alt="TKDN"
- className="w-16 h-8 object-contain object-top ml-1 mr-1 sm:h-6"
- width={50}
- height={50}
- />
- )}
- </div>
- </div>
- {/* </div> */}
-
-
+ <ImageUI
+ src={image}
+ alt={product.name}
+ width={256}
+ height={256}
+ className={style['image']}
+ loading='eager'
+ priority
+ />
+ <div className='absolute top-4 right-10 flex '>
+ <div className='gambarB '>
+ {product.isSni && (
+ <ImageNext
+ src='/images/sni-logo.png'
+ alt='SNI Logo'
+ className='w-12 h-8 object-contain object-top sm:h-6'
+ width={50}
+ height={50}
+ />
+ )}
+ </div>
+ <div className='gambarC '>
+ {product.isTkdn && (
+ <ImageNext
+ src='/images/TKDN.png'
+ alt='TKDN'
+ className='w-16 h-8 object-contain object-top ml-1 mr-1 sm:h-6'
+ width={50}
+ height={50}
+ />
+ )}
+ </div>
+ </div>
+ {/* </div> */}
<div className={style['absolute-info']}>
<Tooltip
placement='bottom-end'
label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
>
- <div className="text-gray-600">
+ <div className='text-gray-600'>
<InfoIcon size={20} />
</div>
</Tooltip>
@@ -94,7 +95,7 @@ const Image = ({ product }: Props) => {
{flashSale.remaining_time > 0 && (
<div className='absolute bottom-0 w-full h-14'>
- <div className="relative w-full h-full">
+ <div className='relative w-full h-full'>
<ImageUI
src='/images/BG-FLASH-SALE.jpg'
alt='Flash Sale Indoteknik'
@@ -105,7 +106,9 @@ const Image = ({ product }: Props) => {
<div className={style['flashsale']}>
<div className='flex items-center gap-x-3'>
- <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div>
+ <div className={style['disc-badge']}>
+ {Math.floor(product.lowest_price.discount_percentage)}%
+ </div>
<div className={style['flashsale-text']}>
<ImageUI
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
@@ -122,12 +125,11 @@ const Image = ({ product }: Props) => {
<span>{duration.seconds().toString().padStart(2, '0')}</span>
</div>
</div>
-
</div>
</div>
)}
</div>
- )
-}
+ );
+};
-export default Image \ No newline at end of file
+export default Image;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 10:17:36 +0000