delete 3 files and update 5 files

src/App.js

@@ -1,4 +1,3 @@
-import logo from "./logo.svg";
 import "./App.scss";
 import Card from "./components/Card";
 

src/App.scss

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/assets/images/square.svg

@@ -0,0 +1,10 @@
+<svg id="element-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
+  <path id="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(17.16 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-2" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(17.16 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-3" data-name="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(2.542 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-4" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(2.542 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <g id="Vector-5" data-name="Vector" fill="none" opacity="0">
+    <path d="M0,0H30.507V30.507H0Z" stroke="none"/>
+    <path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#65a9ff"/>
+  </g>
+</svg>

src/components/Button/index.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+const Button = ({
+  className,
+  iconClassName,
+  iconHolderClassName,
+  icon,
+  text,
+  onClick,
+  sharpStyle,
+  clippath,
+}) => {
+  return (
+    <button
+      style={{
+        clipPath: sharpStyle ? clippath : "",
+      }}
+      onClick={onClick}
+      className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
+    >
+      {text}
+      {icon && (
+        <span className={`${iconHolderClassName}`}>
+          <img src={icon} alt="icon" className={`${iconClassName}`} />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;
+
+Button.defaultProps = {
+  className:
+    "bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
+  text: "اطلاعات بیشتر",
+
+  iconHolderClassName: "bg-secondary mr-2",
+  iconClassName: "w-4",
+  icon: false,
+
+  sharpStyle: false,
+  clippath: "polygon(24% 0, 100% 0%, 100% 99%, 0% 100%)",
+};

src/components/Card/index.js

@@ -1,7 +1,180 @@
-import React from "react";
+import React, { useState } from "react";
 
-const Card = () => {
+import Button from "../Button";
-  return <div className="bg-red-400">Card</div>;
+
+import ax from "../../assets/images/square.svg";
+import FormInput from "../FormInput";
+
+const ProcessCard = ({ processes, title, hint, items, options }) => {
+  const [openModal, setOpenModal] = useState(false);
+  console.log(openModal);
+
+  return (
+    <section className="w-fit mx-auto flex flex-row bg-surface border border-blue-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-blue-400 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 ml-1.5 ${process.color}`}
+                ></div>
+              )}
+              <p className="text-xs bg-blue-400">{process.name}</p>
+              <span className="text-xs mr-2 ">{process.content}</span>
+            </div>
+          ))}
+        </div>
+        {/* middle */}
+        <div className="flex flex-col p-4 my-5 mr-5">
+          <h2 className="text-lg  font-bold">{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-3 bg-gray-200 rounded ">
+          {/* right */}
+          <Button
+            text={"ویرایش"}
+            icon={ax}
+            iconHolderClassName={""}
+            iconClassName={"mr-2 w-5"}
+            className="p-2 bg-primary text-white text-sm rounded"
+            onClick={() => setOpenModal(true)}
+          />
+          {/* left */}
+          <div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-blue-400 divide-x-reverse">
+            {items.map((item, i) => (
+              <div
+                key={i}
+                className="flex flex-row flex-1 items-center justify-center flex-grow"
+              >
+                <img src={item.icon} alt="" className="w-4 h-4 ml-1" />
+                <p className="text-xs ">{item.name}</p>
+                <p className="text-xs mr-1 ">{item.ans}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/* left */}
+      <div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4">
+        {options.map((option, j) => (
+          <div key={j} className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center">
+              <img src={option.icon} alt="icon" className="w-5" />
+              <p className="text-xs mr-1">{option.title}</p>
+            </div>
+            <p className="text-xs mr-7">{option.content}</p>
+          </div>
+        ))}
+      </div>
+      {/* modal */}
+      <div
+        className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
+        ${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
+      `}
+      >
+        <div
+          className="w-1/2 flex flex-col  bg-white border border-gray-400 rounded-sm p-5"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button
+            text={null}
+            icon={ax}
+            iconHolderClassName={""}
+            iconClassName={""}
+            className="p-2 bg-red-600 rounded self-end"
+            onClick={() => setOpenModal(false)}
+          />
+          <FormInput />
+        </div>
+      </div>
+    </section>
+  );
 };
 
-export default Card;
+export default ProcessCard;
+
+ProcessCard.defaultProps = {
+  title: "پروسه مختلف در این قسمت قرار می گیرد",
+  hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
+
+  processes: [
+    {
+      color: "bg-error",
+      name: "فرایند اجرایی",
+      content: 256,
+    },
+    {
+      color: false,
+      name: "وضعیت:",
+      content: "پرداخت شده",
+    },
+    {
+      color: "bg-info",
+      name: "در حال انجام",
+      content: 55,
+    },
+    {
+      color: false,
+      name: "انجام شده",
+      content: 100,
+    },
+  ],
+
+  items: [
+    {
+      icon: ax,
+      name: "سوالات:",
+      ans: 5,
+    },
+    {
+      icon: ax,
+      name: "چک لیست:",
+      ans: "تابع دارد",
+    },
+    {
+      icon: ax,
+      name: "مکاتبات:",
+      ans: "دارد",
+    },
+  ],
+
+  options: [
+    {
+      icon: ax,
+      title: "تاخیر",
+      content: "5 ساعت",
+    },
+    {
+      icon: ax,
+      title: "شرایط اجرا",
+      content: "2 مورد",
+    },
+    {
+      icon: ax,
+      title: "تابع شروع",
+      content: "ندارد",
+    },
+    {
+      icon: ax,
+      title: "مثلث",
+      content: "5 ساعت",
+    },
+    {
+      icon: ax,
+      title: "تایید خودکار",
+      content: "5 ساعت",
+    },
+    {
+      icon: ax,
+      title: "تابع انجام",
+      content: "ندارد",
+    },
+  ],
+};

src/components/CustomSelectBox/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+const CustomSelectBox = ({ options }) => {
+  return (
+    <select className="customizeSelect rounded text-xs text-black py-2 bg-gray-200 focus:bg-white border-gray-200 focus:border-[#2483E1] focus:ring-transparent">
+      {options.map((option, index) => (
+        <option className="text-black" key={index}>
+          {option.title}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default CustomSelectBox;
+
+CustomSelectBox.defaultProps = {
+  options: [
+    { title: "میزان تحصیلات" },
+    { title: "کارشناسی" },
+    { title: "ارشد" },
+    { title: "دکتری" },
+  ],
+};

src/components/FormInput/index.js

@@ -0,0 +1,33 @@
+// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
+
+import React from "react";
+import CustomSelectBox from "../CustomSelectBox";
+
+const FormInput = ({ items }) => {
+  return (
+    <div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse ">
+      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
+        <CustomSelectBox />
+      </div>
+      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
+        <CustomSelectBox />
+      </div>
+    </div>
+  );
+};
+
+export default FormInput;
+
+FormInput.defaultProps = {
+  items: [
+    {
+      title: "mahdi",
+    },
+    {
+      title: "mahdi",
+    },
+    {
+      title: "mahdi",
+    },
+  ],
+};

src/components/Popup/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Popup = () => {
+  return <div>Popup</div>;
+};
+
+export default Popup;

src/index.scss

@@ -1,3 +1,27 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "iransans-medium";
+  src: url(./assets/fonts/IRANSansXFaNum-Regular.woff);
+}
+
+@font-face {
+  font-family: "sansbold";
+  src: url(./assets/fonts/IRANSansWeb_Bold.woff);
+}
+
+body {
+  font-family: iransans-medium;
+  direction: rtl;
+  background-color: #f5f5f5;
+}
+
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}

tailwind.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sansbold: ["sansbold"],
+      },
+    },
   },
   plugins: [],
 };