Checkbox Bug Fixed

src/components/Checkbox/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import './index.css';
 
 export default function Checkbox(props) {
+  console.log(props)
   return (
     <div>
       <svg className="checkbox-symbol">
@@ -16,8 +17,8 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
-        <label className="checkbox" htmlFor="apples">
+        <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">
               <use xlinkHref="#check"></use>

src/components/VerticalExpandableProductFilter/index.js

@@ -11,6 +11,8 @@ const langDetector = (lang = "fa", option1, option2) => {
 export default function VerticalExpandableProductFilter(props) {
   const [text, setText] = useState("");
   const [searchResult, setSearchResult] = useState([]);
+  const [checkedBox, setChecked] = useState([]);
+  const name = props.name||Math.random()
   useEffect(() => {
     let fakeSearchResult;
     fakeSearchResult = props.list.filter(
@@ -54,12 +56,17 @@ export default function VerticalExpandableProductFilter(props) {
       <ul className="w-full list-none flex flex-col divide-y divide-gray-100">
         {(searchResult.length > 0 ? searchResult : props.list)?.map(
           (item1, i) => (
+          
             <li
               key={i}
               className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
             >
+                {console.log(i)}
               <div className="flex flex-row items-center">
-                <Checkbox />
+                <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
+                  checkedBox[i] = !checkedBox[i]
+                  setChecked(checkedBox)
+                }}/>
                 <strong className="text-xs font-light text-gray-500">
                   {item1.name}
                 </strong>

src/views/Product/Desktop/ProductOverAll/index.js

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import { book, userProduct, publicApi } from "../../../../redux/actions";
+import proxy from "../../../../redux/proxy";
+import location from "../../../../utils/location";
+import Button from "../../../../components/Button";
+import Header from "../../../../components/Header";
+import Comment from "../../Comment";
+import Rate from "../../Rate";
+
+export const ProductOverAll = ({
+    productType,
+  getInfo,
+  book,
+  grades,
+  isDark,
+  userId,
+  pushToCart,
+  headerOptions,
+  setHeaderOptions,
+}) =>{
+    const [type, setType] = useState("physical");
+    return (
+        
+        <div>
+           <header
+          className={`w-full flex`}
+        >
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
+            alt=""
+            style={{height: '320px'}}
+            className="-md py-8 px-16 bg-grayF4 mx-4"
+          />
+          <div className="flex flex-1 flex-col pr-2 pt-2">
+            <h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
+              {type === "digital"
+                ? book?.product[0]?.name
+                : book?.product[1]?.name}
+            </h1>
+            <div className="text-blueC0 text-xs dark:text-greenBA">
+              {"پایه" + " " + grades[book?.gradeId]}
+            </div>
+          </div>
+          
+        </header>
+        <ul
+          className="list-none flex flex-row divide-x items-center mt-4"
+          style={{ direction: "ltr" }}
+        >
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {book?.pagesNum} <br /> صفحه
+          </li>
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {"فیزیکی - دیجیتالی"} <br /> در دسترس
+          </li>
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {book?.rate} <br /> امتیاز
+          </li>
+        </ul>
+        <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
+          نسخه محصول را انتخاب کنید
+        </h2>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            title="نسخه فیزیکی"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="49%"
+            color={isDark ? "text-white" : "text-blueC0"}
+            active={type === "physical"}
+            selectable={true}
+            onClick={() => setType("physical")}
+          />
+          <Button
+            title="نسخه دیجیتال"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="49%"
+            selectable={true}
+            active={type === "digital"}
+            color={isDark ? "text-white" : "text-blueC0"}
+            onClick={() => setType("digital")}
+          />
+        </div>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            onClick={() =>
+              proxy.status()
+                ? pushToCart({
+                    productId:
+                      type === "digital"
+                        ? book?.product[0]?.id
+                        : book?.product[1]?.id,
+                    userId: userId,
+                    count: 1,
+                  })
+                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+            }
+            title={
+              "خرید با قیمت" +
+              " " +
+              (type === "digital"
+                ? book?.product[0]?.price
+                : book?.product[1]?.price) +
+              " " +
+              "تومان"
+            }
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "1px" }}
+            width="65%"
+            color="text-white"
+          />
+          <Button
+            title="مشاهده نمونه"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="33%"
+            color={isDark ? "text-white" : "text-blueC0"}
+          />
+        </div>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            title="مشاهده دوره ویدئویی این محصول"
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "0px" }}
+            bgOpacity="bg-opacity-10"
+            width="100%"
+            color={isDark ? "text-white" : "text-blueC0"}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-between items-center mt-4">
+          <Header title="توضیحات" link="#" />
+          <p className="text-xs text-gray1 mt-2 dark:text-white">
+            خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
+            ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
+            ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
+            ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
+            ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
+            ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
+            ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
+            ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
+          </p>
+        </div>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    book: state.book.info,
+    grades: state.publicApi.grades,
+    isDark: state.publicApi.isDark,
+    userId: state.user.status.id,
+  });
+  
+  const mapDispatchToProps = {
+    getInfo: book.info,
+    pushToCart: userProduct.add,
+    setHeaderOptions: publicApi.setHeaderOptions,
+  };
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);
+  

src/views/Product/Desktop/index.js

@@ -1,9 +1,10 @@
 import React from "react";
+import ProductOverAll from "./ProductOverAll";
 
 const DesktopProductLayout = () =>{
     return (
-        <div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
+        <div className="w-4/5 flex flex-row gap-10 px-5  overflow-y-hidden mt-3 mb-64">
-            Desktop
+            <ProductOverAll />
         </div>
     );
 };

src/views/Product/index.js

@@ -174,7 +174,10 @@ export const Product = ({
             <Comment key={index} />
           ))}
         </div>
-      </div>) : <DesktopProductLayout />}
+      </div>) :<div className="flex flex-col items-center justify-center">
+      <DesktopProductLayout />
+      </div>
+      }
     </>
   );
 };
@@ -182,6 +185,7 @@ export const Product = ({
 const mapStateToProps = (state) => ({
   book: state.book.info,
   grades: state.publicApi.grades,
+  isMobile: state.publicApi.isMobile,
   isDark: state.publicApi.isDark,
   userId: state.user.status.id,
 });

src/views/Products/layouts/Sidebar.js

@@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter  btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
-          <VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
+          <VerticalExpandableProductFilter   list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;
 };

tailwind.config.js

@@ -49,6 +49,14 @@ module.exports = {
       gray70: "#707070",
       grayDB: "#DBDBDB",
     }),
+    // height: (theme) =>( {
+    //   sm: '8px',
+    //   md: '16px',
+    //   lg: '24px',
+    //   xl: '48px',
+    //   h420 : '320px',
+    //   full: '100%',
+    //   }),
     borderColor: (theme) => ({
       ...theme("colors"),
       blueC0: "#196EC0",