64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { FC } from 'react';
|
|
import { IShopItem } from '@/api/shop-item.api';
|
|
import styles from '@/components/shop/Shop.module.css';
|
|
import Image from 'next/image';
|
|
import { IHandleOpen } from '@/components/shop/ShopContainer';
|
|
|
|
interface IShopItemProps {
|
|
shopItem: IShopItem;
|
|
handleOpen: (data: IHandleOpen) => void;
|
|
}
|
|
|
|
const ShopItem: FC<IShopItemProps> = ({ shopItem, handleOpen }) => {
|
|
return (
|
|
<div
|
|
className={styles.item}
|
|
onClick={() =>
|
|
handleOpen({
|
|
image: `${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`,
|
|
isDecimal: shopItem.attributes.isDecimal,
|
|
priceItem: shopItem.attributes.price,
|
|
shopItem: shopItem.id,
|
|
})
|
|
}
|
|
>
|
|
{shopItem?.attributes?.icon?.data && (
|
|
<div className={styles.item_img}>
|
|
<img
|
|
loading={'lazy'}
|
|
src={`${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`}
|
|
alt={'shop item icon'}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className={styles.itemInfo}>
|
|
<div className={styles.itemInfoTitle}>
|
|
<span>{shopItem.attributes.name}</span>
|
|
</div>
|
|
<div className={styles.itemInfoContent}>
|
|
<span>{shopItem.attributes.price}</span>
|
|
<Image
|
|
src={'/icons/small-robucks-icon.svg'}
|
|
alt={'small robucks'}
|
|
width={18}
|
|
height={18}
|
|
/>
|
|
<span>=</span>
|
|
<span>1</span>
|
|
<div className={styles.item_img_sm}>
|
|
<img
|
|
loading={'lazy'}
|
|
src={`${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`}
|
|
alt={'small coin icon'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShopItem;
|