استایل این قسمت را درست کردم: این کالاها برای خرید به شما پیشنهام می دهیم |15

temp
mahdi andalib 2 years ago
parent b4830c9b77
commit 40491c678a
  1. 9
      src/components/ProductSuggestion/index.js

@ -26,12 +26,12 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
} }
}, [similarList]); }, [similarList]);
return ( return (
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9"> <section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
<h2 className="text-center text-lg font-bold text-productPrice"> <h2 className="text-center text-lg font-bold text-productPrice">
{window.t("این کالاها برای خرید به شما پیشنهام می دهیم")} {window.t("این کالاها برای خرید به شما پیشنهام می دهیم")}
</h2> </h2>
{/* product design */} {/* product design */}
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5"> <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-10">
{similarList.map((book, index) => ( {similarList.map((book, index) => (
<div <div
className="flex flex-row mb-7 justify-center relative" className="flex flex-row mb-7 justify-center relative"
@ -39,9 +39,10 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
key={index} key={index}
> >
<div <div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer bg-white className={`flex flex-col items-center rounded-md p-5 cursor-pointer bg-white
${selectedProduct === book ? "bg-white" : ""}`} ${selectedProduct === book ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(book)} onClick={() => setSelectedProduct(book)}
style={{ border: "solid 1px #ddd" }}
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`} src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`}
@ -67,7 +68,7 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
<img <img
src={plus} src={plus}
alt="" alt=""
className="w-5 absolute -left-2.5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20" className="w-5 absolute -left-5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20"
/> />
)} )}
</div> </div>

Loading…
Cancel
Save