update 7 files and delete 7 files

src/components/BoxNextToEachOther/index.js

@@ -52,6 +52,7 @@ const BoxNextToEachOther = ({ cards }) => {
 export default BoxNextToEachOther;
 
 BoxNextToEachOther.defaultProps = {
+  selected:"images/selected.svg",
   cards: [
     {
       title: "زائر",

src/components/ChartDesign/index.js

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import Recharts from "./Recharts";
+import BarChartApex from "./BarChartApex";
 
 function ChartDesign() {
   const list = {
     1: <Recharts />,
+    2: <BarChartApex />,
   };
   const [type, setType] = useState(1);
   return (

src/components/CommentDesign/Comments/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { connectToParent } from "../../../utils/comments";
 
-import Avatar from "../../Avatar";
+import Avatar from "../../MiniComponents/Avatar";
 import moment from "jalali-moment";
 import Button from "../../ButtonDesign/Button";
 

src/components/MiniComponents/BookDesign/index.js

@@ -1,15 +1,15 @@
 import React from "react";
 // import "./BookDesign.scss";
 
-import book from "../../assets/images/book.svg";
+import book from "../../../assets/images/book.svg";
-import bookCover from "../../assets/images/book-white-cover.svg";
+import bookCover from "../../../assets/images/book-white-cover.svg";
 
 export const BookDesign = ({ bookBackCoverBg }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="mb-6">
-        <button className="text-lg text-productTitle text-base bg-white p-1 rounded shadow">
+        <button className="text-lg text-productTitle  bg-white p-1 rounded shadow">
           طراحی کتاب
         </button>
       </div>

src/components/MiniComponents/index.js

@@ -3,12 +3,16 @@ import React, { useState } from "react";
 import CommentIcon from "./CommentIcon";
 import RelativeCircle from "./RelativeCircle";
 import TitleSubtitle from "./TitleSubtitle";
+import Avatar from "./Avatar";
+import BookDesign from "./BookDesign";
 
 function MiniComponents() {
   const list = {
     1: <CommentIcon />,
     2: <RelativeCircle />,
     3: <TitleSubtitle />,
+    4: <Avatar />,
+    5: <BookDesign />,
   };
   const [type, setType] = useState(1);
 

src/components/UploadFile/UploadDesign1/index.js

@@ -0,0 +1,99 @@
+import React, { Component } from "react";
+
+import axios from "axios";
+
+export default class UploadDesign1 extends Component {
+  state = {
+    uploadPercentage: 0,
+    avatar: "",
+  };
+
+  UploadDesign1 = ({ target: { files } }) => {
+    console.log(files[0]);
+    let data = new FormData();
+    data.append("file", files[0]);
+
+    const options = {
+      onUploadProgress: (progressEvent) => {
+        const { loaded, total } = progressEvent;
+        let percent = Math.floor((loaded * 100) / total);
+        console.log(`${loaded}kb of ${total}kb | ${percent}%`);
+
+        if (percent < 100) {
+          this.setState({ uploadPercentage: percent });
+        }
+      },
+    };
+
+    axios
+      .post("https://www.mocky.io/v2/5cc8019d300000980a055e76", data, options)
+      .then((res) => {
+        console.log(res);
+        this.setState({ avatar: res.data.url, uploadPercentage: 100 }, () => {
+          setTimeout(() => {
+            this.setState({ uploadPercentage: 0 });
+          }, 1000);
+        });
+      });
+  };
+
+  render() {
+    const { uploadPercentage } = this.state;
+
+    return (
+      <div className="w-full">
+        {/* ? upload input File  */}
+        <div className="relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
+          <div className="">
+            <img src="images/UploadFilefile.svg" className="" alt="" />
+            <input
+              onChange={this.uploadFile}
+              type="file"
+              className="opacity-0 absolute top-[39%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
+              name=""
+            />
+            {uploadPercentage > 0 && (
+              <div
+                className="w-50 bg-red-500 h-2 z-50 transition-all duration-700"
+                now={uploadPercentage}
+                label={`${uploadPercentage}%`}
+              ></div>
+            )}
+          </div>
+          <p className="text-xs mt-5">
+            یک فایل را اینجا بکشید یا از
+            <span className="text-blue-300">رایانه خود انتخاب کنید</span>
+          </p>
+        </div>
+        {/* upload file progress bar */}
+        <div>
+          <div className="w-full flex flex-col border border-blue-500 mt-5 rounded-lg p-2">
+            <div className="flex flex-row justify-between">
+              {/* right section */}
+              <div className="flex flex-col gap-y-2">
+                <span className="text-xs text-blue-900">
+                  در حال آپلود فایل ...
+                </span>
+                <span className="text-xs text-blue-900">AdobeXD.zip</span>
+              </div>
+              {/* left section */}
+              <div className="flex flex-row items-center">
+                <span className="text-xs">65 درصد</span>
+                <span className="text-xs mr-2">3 دقیقه باقیمانده</span>
+                {/* pause button */}
+                <div className="bg-blue-100 bg-opacity-50 p-2 rounded-full cursor-pointer mr-2">
+                  <img src="images/UploadFilepause.svg" alt="pic" />
+                </div>
+              </div>
+            </div>
+            <div className="bg-[#D3E9FF] h-3 w-full rounded mt-2">
+              <div
+                className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/UploadFile/index.js

@@ -1,99 +1,25 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 
-import axios from "axios";
+import UploadDesign1 from "./UploadDesign1";
 
-export default class UploadFile extends Component {
+function UploadFile() {
-  state = {
+  const list = {
-    uploadPercentage: 0,
+    1: <UploadDesign1 />,
-    avatar: "",
   };
-
+  const [type, setType] = useState(1);
-  uploadFile = ({ target: { files } }) => {
-    console.log(files[0]);
-    let data = new FormData();
-    data.append("file", files[0]);
-
-    const options = {
-      onUploadProgress: (progressEvent) => {
-        const { loaded, total } = progressEvent;
-        let percent = Math.floor((loaded * 100) / total);
-        console.log(`${loaded}kb of ${total}kb | ${percent}%`);
-
-        if (percent < 100) {
-          this.setState({ uploadPercentage: percent });
-        }
-      },
-    };
-
-    axios
-      .post("https://www.mocky.io/v2/5cc8019d300000980a055e76", data, options)
-      .then((res) => {
-        console.log(res);
-        this.setState({ avatar: res.data.url, uploadPercentage: 100 }, () => {
-          setTimeout(() => {
-            this.setState({ uploadPercentage: 0 });
-          }, 1000);
-        });
-      });
-  };
-
-  render() {
-    const { uploadPercentage } = this.state;
-
   return (
-      <div className="w-full">
+    <div className="w-full flex flex-col items-center">
-        {/* ? upload input File  */}
+      <select
-        <div className="relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
+        className="mb-10 w-20 bg-gray-200"
-          <div className=" ">
+        onChange={(e) => setType(e.target.value)}
-            <img src="images/UploadFilefile.svg" className="" alt="" />
+      >
-            <input
+        {Object.keys(list).map((option, index) => (
-              onChange={this.uploadFile}
+          <option key={index}>{option}</option>
-              type="file"
+        ))}
-              className="opacity-0 absolute top-[39%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
+      </select>
-              name=""
+      {list[type]}
-            />
-            {uploadPercentage > 0 && (
-              <div
-                className="w-50 bg-red-500 h-2 z-50 transition-all duration-700"
-                now={uploadPercentage}
-                label={`${uploadPercentage}%`}
-              ></div>
-            )}
-          </div>
-          <p className="text-xs mt-5">
-            یک فایل را اینجا بکشید یا از
-            <span className="text-blue-300">رایانه خود انتخاب کنید</span>
-          </p>
-        </div>
-        {/* upload file progress bar */}
-        <div>
-          <div className="w-full flex flex-col border border-blue-500 mt-5 rounded-lg p-2">
-            <div className="flex flex-row justify-between">
-              {/* right section */}
-              <div className="flex flex-col gap-y-2">
-                <span className="text-xs text-blue-900">
-                  در حال آپلود فایل ...
-                </span>
-                <span className="text-xs text-blue-900">AdobeXD.zip</span>
-              </div>
-              {/* left section */}
-              <div className="flex flex-row items-center">
-                <span className="text-xs">65 درصد</span>
-                <span className="text-xs mr-2">3 دقیقه باقیمانده</span>
-                {/* pause button */}
-                <div className="bg-blue-100 bg-opacity-50 p-2 rounded-full cursor-pointer mr-2">
-                  <img src="images/UploadFilepause.svg" alt="pic" />
-                </div>
-              </div>
-            </div>
-            <div className="bg-[#D3E9FF] h-3 w-full rounded mt-2">
-              <div
-                className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
-              ></div>
-            </div>
-          </div>
-        </div>
     </div>
   );
 }
-}
+
+export default UploadFile;

src/components/bookDesign/BookDesign.css

@@ -1 +0,0 @@
-/* No CSS *//*# sourceMappingURL=BookDesign.css.map */

src/components/bookDesign/BookDesign.css.map

@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "",
-    "sources": [
-        "BookDesign.scss"
-    ],
-    "names": [],
-    "file": "BookDesign.css"
-}

src/redux/data.js

@@ -36,6 +36,8 @@ import ProductCategories from "../components/ProductCategories";
 import RangeSlider from "../components/RangeSlider";
 import Stepper from "../components/Stepper";
 import UploadFile from "../components/UploadFile";
+import AnimatedInput from "../components/AnimatedInput/Input";
+import BoxNextToEachOther from "../components/BoxNextToEachOther";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -709,6 +711,26 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Animated Input",
+    author: "MrGorji",
+    props: [],
+    content: {
+      name: "Animated Input",
+      component: <AnimatedInput />,
+      code: null,
+    },
+  },
+  {
+    name: "Box Next To Each Other",
+    author: "MrGorji",
+    props: [],
+    content: {
+      name: "Box Next To Each Other",
+      component: <BoxNextToEachOther />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",