master
mahdi 3 years ago
parent 6c1968f810
commit bfaeb51a57
  1. 12
      src/App.js
  2. 19
      src/components/ProductSuggestion/index.js

@ -58,16 +58,16 @@ function App() {
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */} {/* <Design2D /> */}
{/* <Features /> */} {/* <Features /> */}
{/* <Feedback /> */} <Feedback />
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} <ProductSuggestion />
{/* <ProductImage /> */} {/* <ProductImage /> */}
{/* <ProductTab /> */} <ProductTab />
{/* <ProductStatusCard /> */} {/* <ProductStatusCard /> */}
<AdvertisementDesign1 /> {/* <AdvertisementDesign1 /> */}
<AdvertisementDesign2 /> {/* <AdvertisementDesign2 /> */}
<AdvertisementDesign3 /> {/* <AdvertisementDesign3 /> */}
</div> </div>
</Provider> </Provider>
); );

@ -19,6 +19,7 @@ const ProductSuggestion = ({ suggestions, selected }) => {
<div <div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500 className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
${selectedProduct === suggestion ? "bg-white" : ""}`} ${selectedProduct === suggestion ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(suggestion)}
> >
<img <img
src={suggestion.productImage} src={suggestion.productImage}
@ -32,12 +33,16 @@ const ProductSuggestion = ({ suggestions, selected }) => {
{suggestion.productPrice} {suggestion.productPrice}
<span className="mr-1 text-xs text-black">تومان</span> <span className="mr-1 text-xs text-black">تومان</span>
</p> </p>
<div className="flex flex-col items-center mt-3"> <div className="flex flex-col items-center">
{suggestion.selected && ( {/* {suggestion.selected && (
<span className="text-xs">انتخاب شما</span> <span className="text-xs">انتخاب شما</span>
)} */}
{selectedProduct === suggestion && (
<span className="text-xs mt-2">انتخاب شما</span>
)} )}
<input <input
checked={suggestion.selected} // checked={suggestion.selected}
checked={selectedProduct === suggestion ? true : false}
onClick={() => setSelectedProduct(suggestion)} onClick={() => setSelectedProduct(suggestion)}
className="checkbox-input mt-4 cursor-pointer w-4 h-4" className="checkbox-input mt-4 cursor-pointer w-4 h-4"
type="checkbox" type="checkbox"
@ -79,28 +84,28 @@ ProductSuggestion.defaultProps = {
productTitle: "لپ تاپ گیمینگ ایسوس", productTitle: "لپ تاپ گیمینگ ایسوس",
productPrice: "750000", productPrice: "750000",
plusIcon: null, plusIcon: null,
selected: true, // selected: true,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "مانیتور 40 اینچ", productTitle: "مانیتور 40 اینچ",
productPrice: "3.000.000", productPrice: "3.000.000",
plusIcon: plus, plusIcon: plus,
selected: false, // selected: true,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "ماوس گیمینگ", productTitle: "ماوس گیمینگ",
productPrice: "650/000", productPrice: "650/000",
plusIcon: plus, plusIcon: plus,
selected: false, // selected: false,
}, },
{ {
productImage: productImg, productImage: productImg,
productTitle: "لپ تاپ مک بوک پرو 2022", productTitle: "لپ تاپ مک بوک پرو 2022",
productPrice: "2000", productPrice: "2000",
plusIcon: plus, plusIcon: plus,
selected: false, // selected: false,
}, },
], ],
}; };

Loading…
Cancel
Save