92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { IoIosArrowForward } from "react-icons/io";
|
|
import { Currency } from "../../Layout/app/Const";
|
|
import Similar from "./Similar";
|
|
import { useGetSingleBaseProduct } from "../../api/baseProduct";
|
|
import { Product } from "../../types/item";
|
|
import { useParams } from "react-router-dom";
|
|
import CustomImage from "../../ui/CustomImage";
|
|
import { Spin } from "antd";
|
|
import { languageObject } from "../../utils/languageObject";
|
|
import { jsonObjectToArray } from "../../utils/jsonObjectToArray";
|
|
import HeaderLink from "../../Components/Ui/HeaderLink";
|
|
import { BaseURL } from "../../api/utils/config";
|
|
|
|
const Page = () => {
|
|
|
|
const [t] = useTranslation();
|
|
const {product_id} = useParams()
|
|
const {data,isLoading} = useGetSingleBaseProduct({
|
|
show:product_id
|
|
})
|
|
const product = data?.data?.product as Product || {}
|
|
|
|
|
|
const [MainImage, setMainImage] = useState(product?.main_photo);
|
|
|
|
const handelImage = (item: any) => {
|
|
// setMainImage(item);
|
|
};
|
|
console.log(product?.images);
|
|
|
|
const info = jsonObjectToArray(product?.info)
|
|
|
|
if(isLoading){
|
|
return <div className="loading_state"> <Spin/> </div>
|
|
}
|
|
return (
|
|
<div className="Product">
|
|
<header>
|
|
<HeaderLink text="Product" isMulti={true} extraText="Categories" extraLink={"categories"}/>
|
|
</header>
|
|
<main>
|
|
<div className="Product_left">
|
|
<span>
|
|
<CustomImage src={MainImage ?? product?.main_photo} alt="" />
|
|
<div className="gallery_product">
|
|
{product?.images?.map((item,index)=>{
|
|
return (
|
|
<span key={index} onClick={() => handelImage(item?.path)} >
|
|
<CustomImage
|
|
|
|
src={item?.path}
|
|
alt=""
|
|
/>
|
|
</span>
|
|
)
|
|
})}
|
|
<span>
|
|
<img
|
|
onClick={() => handelImage('/Home/p1.png')}
|
|
// src={}
|
|
alt=""
|
|
/>
|
|
</span>
|
|
</div>
|
|
</span>
|
|
|
|
</div>
|
|
<div className="Product_Right">
|
|
<h1> {languageObject(product?.name)} </h1>
|
|
<div>
|
|
|
|
<span>
|
|
<h6>{t("Category")}</h6> <h5>{languageObject(product?.category?.name)}</h5>
|
|
</span>
|
|
<span>
|
|
<h6>{t("Price")}</h6> <h5>{product?.price}</h5>
|
|
</span>
|
|
<span>
|
|
<h6>{t("Description")}</h6> <h5>{languageObject(product?.description)}</h5>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Similar category_id={product?.category?.id} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Page;
|