/** * It's common (top-side) details object which exist on each object details view. * Here should be passed the gotten from API details. */ import type { ProductViewModel } from "@/core/types/dto"; import type { UploadedTexture } from "@/core/redux/customization"; import { useCallback, useState, type JSX } from "react"; import { addFavourites, removeFavourites } from "@/app/(visualization)/project/@modals/(.)customization/_actions/favourites"; import { useAppSession } from "@/core/utils/hooks/useAppSession"; import Image from "next/image"; import Favourite from "@/core/components/Icons/Favourite"; interface CommonDetailsProps extends Partial<ProductViewModel> { uploaded?: UploadedTexture | null; isFavourite: boolean; } export default function CommonDetails(props: Readonly<CommonDetailsProps>): JSX.Element { const name = props.uploaded?.uploaded ? props.uploaded.uploaded.textureName : props?.name; const image = props.uploaded?.uploaded ? props.uploaded.uploaded.loadUrl : props?.image; const [processing, setProcessing] = useState<boolean>(false); const session = useAppSession(); const [favorite, setFavorite] = useState<boolean>(props.isFavourite); const handleFavourites = useCallback(async (id: string) => { setProcessing(true); if (!props.isFavourite) { const response = await addFavourites(session.data?.user.id || "", id); setFavorite(response); } else { const response = await removeFavourites(session.data?.user.id || "", id); setFavorite(!response); } setProcessing(false); }, [props.isFavourite]); return ( <div className={"w-full h-[125px] flex items-center gap-5 overflow-y-hidden"}> <div className={"rounded-[10px] w-[125px] h-[125px] overflow-hidden relative"}> {(image && name) && ( <Image src={image} alt={name} width={0} height={0} sizes={"100vw"} className={"rounded-[10px] w-full h-full"} /> )} {(!props.uploaded && props._id) && ( <Favourite selected={favorite} onChange={handleFavourites.bind(globalThis, props._id)} className={`absolute right-[10px] top-[12px]`} processing={processing} /> )} {!image && !name && (<div className={"w-full h-full bg-grey-400"} />)} </div> {/* TODO: the keys could be different, so it should be improved for independent displaying */} <div className={` flex-1 flex flex-col justify-start gap-2.5 ${/*h-full*//* It's temporary height due empty data */ "h-[88px]"} `}> <p className={"text-[12px]"}> <span className={"font-semibold text-dark-900"}>Name: </span> <span className={"text-dark-900 text-opacity-60"}>{name}</span> </p> {props.uploaded?.uploaded && ( <p className={"text-[12px]"}> <span className={"font-semibold text-dark-900"}>Size: </span> <span className={"text-dark-900 text-opacity-60"}> {props.uploaded?.uploaded.width}x{props.uploaded?.uploaded.height} </span> </p> )} <p className={`text-[12px] ${props.uploaded?.uploaded ? "!hidden" : ""}`}> <span className={"font-semibold text-dark-900"}>Brand: </span> <span className={"text-dark-900 text-opacity-60"}>{props.brand}</span> </p> <p className={`text-[12px] ${props.uploaded?.uploaded ? "!hidden" : ""}`}> <span className={"font-semibold text-dark-900"}>Price: </span> <span className={"text-dark-900 text-opacity-60"}>{props.price}</span> </p> {/*{Object.keys(props.properties).map(p => (*/} {/* <p key={p} className={"text-[12px]"}>*/} {/* <span className={"font-semibold text-dark-900"}>{capitalize(p)}: </span>*/} {/* <span className={"text-dark-900 text-opacity-60"}>{props.properties[p]}</span>*/} {/* </p>*/} {/*))}*/} </div> </div> ); }