delete 2 files and update 2 files

src/components/CardDesgin/CardTrelloDesign/index.js

@@ -1,10 +1,10 @@
 import React from "react";
-import Button from "../ButtonDesign/Button";
-import CircleInCircle from "../CircleInCircle";
-import TagDesign1 from "../Tag/TagDesign1";
-import AnimatedProgressBar1 from "../ProgressBar/AnimatedProgressbar1";
-import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
-import CommentIcon from "../MiniComponents/CommentIcon";
+import Button from "../../ButtonDesign/Button";
+import CircleInCircle from "../../CircleInCircle";
+import TagDesign1 from "../../Tag/TagDesign1";
+import AnimatedProgressBar1 from "../../ProgressBar/AnimatedProgressbar1";
+import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
+import CommentIcon from "../../MiniComponents/CommentIcon";
 
 const CardTrelloDesign = ({
   circle,

src/components/CardDesgin/ProcessCard/index.js

@@ -0,0 +1,90 @@
+import React from "react";
+import Button from "../../ButtonDesign/Button";
+
+const ProcessCard = ({ processes, title, hint, items }) => {
+  return (
+    <section className="w-[600px] border border-gray-400 rounded">
+      {/* right */}
+      <div className="flex flex-1 flex-col">
+        {/* top */}
+        <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-gray-300 divide-x-reverse">
+          {processes.map((process, index) => (
+            <div
+              className="flex flex-row flex-1 items-center justify-center flex-grow"
+              key={index}
+            >
+              {process.color && (
+                <div
+                  className={`w-1.5 h-5 rounded-sm ml-1.5 ${process.color}`}
+                ></div>
+              )}
+              <p className="text-xs text-blue-900">{process.name}</p>
+              <span className="text-xs mr-2 text-blue-900">
+                {process.content}
+              </span>
+            </div>
+          ))}
+        </div>
+        {/* middle */}
+        <div className="flex flex-col p-4">
+          <h2 className="text-lg text-blue-800 font-sansbold">{title}</h2>
+          <p className="text-sm text-justify leading-6 mt-3">{hint}</p>
+        </div>
+        {/* bottom */}
+        <div className="flex flex-row item-center justify-around p-4 bg-gray-200 rounded">
+          {/* right */}
+          <Button
+            text={"ویرایش"}
+            icon={"images/white-cart-icon.svg"}
+            iconHolderClassName={""}
+            iconClassName={"mr-2 w-6"}
+            className="p-2 bg-blue-500 text-white text-sm rounded-md"
+          />
+          {/* left */}
+          {items.map((item, i) => (
+            <img src={item.icon} alt="" />
+          ))}
+        </div>
+      </div>
+      {/* left */}
+    </section>
+  );
+};
+
+export default ProcessCard;
+
+ProcessCard.defaultProps = {
+  title: "پروسه مختلف در این قسمت قرار می گیرد",
+  hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
+
+  processes: [
+    {
+      color: "bg-red-600",
+      name: "فرایند اجرایی",
+      content: 256,
+    },
+    {
+      color: false,
+      name: "وضعیت:",
+      content: "پرداخت شده",
+    },
+    {
+      color: "bg-blue-600",
+      name: "در حال انجام",
+      content: 55,
+    },
+    {
+      color: false,
+      name: "انجام شده",
+      content: 100,
+    },
+  ],
+
+  items: [
+    {
+      icon: "images/user-edit.svg",
+      name: "سوالات",
+      ans: "5",
+    },
+  ],
+};

src/components/CardDesgin/index.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import CardTrelloDesign from "./CardTrelloDesign";
+import ProcessCard from "./ProcessCard";
+
+function CardDesgin() {
+  const list = {
+    1: <CardTrelloDesign />,
+    2: <ProcessCard />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default CardDesgin;

src/components/MiniComponents/index.js

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

src/redux/data.js

@@ -6,7 +6,7 @@ import Alert from "../components/Alert";
 import Toast from "../components/Toast";
 import Banners from "../components/Banners";
 import Blog from "../components/Blog";
-import CardTrelloDesign from "../components/CardTrelloDesign";
+import CardDesgin from "../components/CardDesgin";
 import ChartDesign from "../components/ChartDesign";
 import ProgressBar from "../components/ProgressBar";
 import Checkbox from "../components/Checkbox";
@@ -207,7 +207,7 @@ const components = [
     props: [],
     content: {
       name: "Card Designs",
-      component: <CardTrelloDesign />,
+      component: <CardDesgin />,
       code: null,
     },
   },