update 7 files and delete 1 file

src/App.js

@@ -77,7 +77,11 @@ import CircleInCircle from "./components/CircleInCircle";
 import NewTagDesign from "./components/NewTagDesign";
 import AnimatedProgressBar from "./components/AnimatedProgressBar";
 import ReligiousTimes from "./components/ReligiousTimes";
-import NumOfGuestsEmployees from "./components/NumOfGuestsEmployees";
+import DistributedData from "./components/DistributedData";
+import CardDesign1 from "./components/CardDesign1";
+import CustomToast from "./components/CustomToast";
+import IconText from "./components/IconText";
+import CardDesign2 from "./components/CardDesign2";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -134,9 +138,11 @@ function App() {
         {/* <GridListTable /> */}
         {/* <PopupCard /> */}
         {/* <TimeLine /> */}
-        {/* <CardTrelloDesign /> */}
+        <CardTrelloDesign />
-        <ReligiousTimes />
+        {/* <ReligiousTimes /> */}
-        <NumOfGuestsEmployees />
+        {/* <DistributedData /> */}
+        {/* <CardDesign1 /> */}
+        {/* <CardDesign2 /> */}
         {/* *************************************************** mini components ***************************************************  */}
         {/* <AnimatedProgressBar /> */}
         {/* <CircleInCircle /> */}
@@ -156,6 +162,8 @@ function App() {
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <IndianaDragScroll /> */}
+        {/* <IconText /> */}
+        {/* <CustomToast /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/Button/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+const Button = ({ className, iconClassName, icon, text, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${className}`}
+    >
+      {text}
+      {icon && (
+        <span className={`rounded-full ${iconClassName}}`}>
+          <img src={icon} alt="" className="w-full" />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;
+Button.defaultProps = {
+  className:
+    "bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
+  iconClassName: "bg-darkGreenBg mr-2",
+  text: "اطلاعات بیشتر",
+};

src/components/CardDesign2/index.js

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

src/components/CardTrelloDesign/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ButtonNewDesign from "../ButtonNewDesign";
+import Button from "../Button";
 import CircleInCircle from "../CircleInCircle";
 import NewTagDesign from "../NewTagDesign";
 
@@ -9,13 +9,25 @@ import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 import AnimatedProgressBar from "../AnimatedProgressBar";
 
-const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCards,showEmptyCards }) => {
+const CardTrelloDesign = ({
+  circle,
+  commnets,
+  buttons,
+  tags,
+  showBtn,
+  showTag,
+  emptyCards,
+  showEmptyCards,
+}) => {
   return (
     <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
-      <div className={`flex justify-between items-center ${circle === false ? "flex-row-reverse" : "flex-row"}`}
+      <div
+        className={`flex justify-between items-center ${
+          circle === false ? "flex-row-reverse" : "flex-row"
+        }`}
         // style={{direction: circle === false ? "ltr" : "rtl"}}
-       >
+      >
         {/* right */}
         {circle && (
           <CircleInCircle
@@ -29,21 +41,20 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
         )}
         {/* left */}
         <div className="flex flex-row gap-x-1 items-center place-content-end">
-          {showBtn && buttons.map(btn=> <ButtonNewDesign
+          {showBtn &&
-            bgColor={`bg-[${btn.color}]`}
+            buttons.map((btn) => (
-            bgHoverColor={"bg-transparent"}
+              <Button
-            border={"border-none"}
+                className={`${btn.className}  border-none px-1 py-0.5 text-xs rounded-sm text-white`}
-            paddingX={"p-1"}
+                text={btn.name}
-            paddingY={"p-0.5"}
+              />
-            fontSize={"text-xs"}
+            ))}
-            borderRadius={"rounded-sm"}
+          {showEmptyCards &&
-            icon={false}
+            emptyCards.map((card, idx) => (
-            text={btn.name}
+              <div
-          />
+                key={idx}
-          )}
+                className={`w-5 h-1.5 rounded ${card.backgroundColor}`}
-          {showEmptyCards && emptyCards.map((card,idx) => (
+              ></div>
-            <div className={`w-5 h-1.5 rounded ${card.backgroundColor}`}></div>
+            ))}
-          ))}
         </div>
       </div>
       {/* middle */}
@@ -58,40 +69,56 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
       <div className="flex flex-row justify-between items-center mt-3">
         {/* right */}
         <div className="flex flex-row items-center gap-x-1">
-          <ProfilePicNextToEachOther num={3} marginLeft={"3px"} width={"w-10"} />
+          <ProfilePicNextToEachOther
+            num={3}
+            marginLeft={"3px"}
+            width={"w-10"}
+          />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
           {/* comment Icon */}
           {commnets && (
             <div class="flex flex-row items-center ml-1">
-              <span className="text-xs ml-0.5 text-[10px] text-[#707070]">10</span>
+              <span className="text-xs ml-0.5 text-[10px] text-[#707070]">
+                10
+              </span>
               <div className="relative">
-                <img src={messageText} alt="comment-icon" class="w-5 rounded-full" />
+                <img
+                  src={messageText}
+                  alt="comment-icon"
+                  class="w-5 rounded-full"
+                />
                 <span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-2 border-white bg-[#0AABFF] rounded-full"></span>
               </div>
             </div>
           )}
-          {showTag && tags.map(tag => 
+          {showTag &&
+            tags.map((tag) => (
               <NewTagDesign
-              title={tag.title}
+                title={tag.title}
-              align={"flex-row-reverse"}
+                align={"flex-row-reverse"}
-              titleColor={`text-[${tag.color}]`}
+                titleColor={`text-[${tag.color}]`}
-              tagBgColor={`bg-[${tag.bgColor}]`}
+                tagBgColor={`bg-[${tag.backgroundColor}]`}
-              border={"border-none"}
+                border={"border-none"}
-              borderRadius={"rounded-sm"}
+                borderRadius={"rounded-sm"}
-              iconWidth={"w-4"}
+                iconWidth={"w-4"}
-              marginRight="mr-0"
+                marginRight="mr-0"
-              marginLeft="ml-1"
+                marginLeft="ml-1"
-              icon={tag.icon}
+                icon={tag.icon}
-              paddingY={"p-1"}
+                paddingY={"p-1"}
-              paddingX={"p-1"}
+                paddingX={"p-1"}
-            />
+              />
-          )}
+            ))}
         </div>
       </div>
       {/* progressBar */}
-      <AnimatedProgressBar rangeWidth={"39%"} parentBg={"bg-[#E3E3E3]"} childBg={"bg-[#06BACE]"} />
+      <AnimatedProgressBar
+        rangeWidth={"39%"}
+        parentBg={"bg-[#E3E3E3]"}
+        childBg={"bg-[#06BACE]"}
+      />
+      {/* <div className="hidden bg-[#0000ff] bg-[#00ff00] bg-[#ff0000]  "></div> */}
     </div>
   );
 };
@@ -106,45 +133,44 @@ CardTrelloDesign.defaultProps = {
   buttons: [
     {
       name: "رابط کاربری",
-      color: "#FF0A3A"
+      className: "bg-[#0000ff55]",
     },
     {
       name: "فرانت اند",
-      color: "#0AABFF"
+      className: "bg-[#00ff00]",
     },
     {
       name: "بک اند",
-      color: "#C7FF0A"
+      className: "bg-[#ff0000]",
-    }
+    },
-  ],  
+  ],
 
-  showTag:true,
+  showTag: true,
   tags: [
     {
-      title:"29 فروردین",
+      title: "29 فروردین",
       color: "#007987",
-      bgColor: "#06BACE33",
+      backgroundColor: "#06BACE33",
-      icon: clock
+      icon: clock,
     },
     {
-      title:"12 از 13",
+      title: "12 از 13",
-      color: "#FFB300",
+      color: "#FFAA00",
-      bgColor: "#FFAA0033",
+      backgroundColor: "#FFAA0033",
-      icon: nike
+      icon: nike,
     },
   ],
 
-  showEmptyCards:false,
+  showEmptyCards: false,
   emptyCards: [
     {
-      backgroundColor: "bg-[#FF0A3C]"
+      backgroundColor: "bg-[#FF0A3C]",
     },
     {
-      backgroundColor: "bg-[#0AABFF]"
+      backgroundColor: "bg-[#0AABFF]",
     },
     {
-      backgroundColor: "bg-[#C7FF0A]"
+      backgroundColor: "bg-[#C7FF0A]",
     },
-  ]
+  ],
-
 };

src/components/CustomToast/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+import penIcon from "./pen-icon.svg";
+
+const CustomToast = ({
+  backgroundColor,
+  borderColor,
+  textColor,
+  padding,
+  icon,
+}) => {
+  return (
+    <div
+      className={`flex flex-row items-center border-2 rounded mt-4 font-bold text-sm ${backgroundColor} ${borderColor} ${textColor} ${padding} `}
+    >
+      <p className="flex-1">ترسیم نقشه سالن</p>
+      <img src={icon} alt="pen" />
+    </div>
+  );
+};
+
+export default CustomToast;
+
+CustomToast.defaultProps = {
+  backgroundColor: "bg-[#489BEC33]",
+  borderColor: "border-[#489BEC]",
+  textColor: "text-[#0555A4]",
+  padding: "p-4",
+  icon: penIcon,
+};

src/components/CustomToast/pen-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_path" data-name="vuesax/linear/path" transform="translate(-490 -254)">
+    <g id="path" transform="translate(490 254)">
+      <path id="Vector" d="M8.21,3.854,5.18.824C4.03-.326,2.46-.266,1.69.964L0,3.634l5.4,5.4,2.67-1.69A2.231,2.231,0,0,0,8.21,3.854Z" transform="translate(11.58 3.416)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M8.133.256,4.2.016c-2.19-.13-2.96.54-3.2,2.63l-.98,8.32a2.409,2.409,0,0,0,2.8,2.8l8.32-.98c2.09-.25,2.85-1.01,2.63-3.2l-.23-3.93" transform="translate(3.447 6.794)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,3.04,3.03,0" transform="translate(4.61 16.38)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/DistributedData/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 
-const NumOfGuestsEmployees = ({ items }) => {
+const DistributedData = ({ items }) => {
   return (
-    <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[465px] mx-auto bg-white shadow-sm rounded-lg pt-3">
+    <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[500px] mx-auto bg-white shadow-sm rounded-lg pt-3">
       {items.map((row, index) => (
         <div
           className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${
@@ -18,7 +18,7 @@ const NumOfGuestsEmployees = ({ items }) => {
             >
               <p className="text-[#0F0543]">{item.name}</p>
               <span
-                className={` ${items ? "mt-0" : "mt-2"} ${
+                className={` ${
                   item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
                 }`}
               >
@@ -32,9 +32,9 @@ const NumOfGuestsEmployees = ({ items }) => {
   );
 };
 
-export default NumOfGuestsEmployees;
+export default DistributedData;
 
-NumOfGuestsEmployees.defaultProps = {
+DistributedData.defaultProps = {
   items1: [
     [
       {

src/components/FileManager/index.js

@@ -99,10 +99,10 @@ const FileManager = () => {
       </div>
       {/* left Section */}
       <div className="w-3/12 py-5 flex flex-col">
-        <TitleSubtitle subTitleShow={false} />
+        <TitleSubtitle subTitle={false} />
         <SemiDonut />
         <div className="px-4" style={{ marginTop: "-113px" }}>
-          <TitleSubtitle subTitleShow={false} />
+          <TitleSubtitle subTitle={false} />
           <div className="flex flex-col items-center justify-center">
             {/* {[0, 1, 2].map((item, index) => (
               <CardHolder />

src/components/IconText/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+import infoIcon from "./info-icon.svg";
+
+const IconText = ({ textColor, textSize }) => {
+  return (
+    <div className="flex flex-row items-start mt-4">
+      <img src={infoIcon} alt="info" />
+      <p className={`${textColor} ${textSize} text-justify mr-3 leading-5`}>
+        ابتدا باید دیوار ها به صورت حدودی ترسیم شوند و تمامی نقاط به یگ دیگر وصل
+        شوند تا طرح برای جایگذاری وسایل آماده شود
+      </p>
+    </div>
+  );
+};
+
+export default IconText;
+
+IconText.defaultProps = {
+  icon: infoIcon,
+  textColor: "text-[#2E2E2E]",
+  textSize: "text-xs",
+};

src/components/IconText/info-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g id="Group_2122" data-name="Group 2122" transform="translate(-1813 -318)">
+    <circle id="Ellipse_2" data-name="Ellipse 2" cx="8" cy="8" r="8" transform="translate(1813 318)" fill="#489bec"/>
+    <text id="i" transform="translate(1822 329)" fill="#fff" font-size="9" font-family="IRANSansX-Medium, IRANSansX" font-weight="500"><tspan x="-2.241" y="0">i</tspan></text>
+  </g>
+</svg>

src/components/NewTagDesign/index.js

@@ -41,7 +41,7 @@ NewTagDesign.defaultProps = {
   title: "کتاب",
   align: "flex-row",
   titleColor: "text-blue-600",
-  tagBgColor: "bg-blue-300 bg-opacity-10",
+  tagBgColor: "bg-blue-300",
   border: "border-2",
   borderRadius: "rounded-full",
   tagBorderColor: "border-blue-600",

src/components/ProfilePicNextToEachOther/index.js

@@ -6,9 +6,9 @@ import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
 
-const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
+const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => {
   return (
-    <div className="flex">
+    <div className="flex cursor-pointer">
       {users.slice(0, num).map((user, i) => (
         <div className="flex flex-row items-center">
           <img
@@ -18,13 +18,13 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
             alt="profile-pic"
             style={{ marginLeft: `${marginLeft}` }}
           />
-          {Number(i) === (num - 1) && (
+          {Number(i) === num - 1 && (
             <div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600">
-              + {users.length - (num)}
+              + {users.length - num}
             </div>
           )}
         </div>
-        ))}
+      ))}
     </div>
   );
 };

src/components/ReactTable5/index.js

@@ -57,9 +57,9 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
             </div>
           ))}
       </div>
-      <div className="">
+      {/* <div className="">
-        <TitleSubtitle titleShow={false} subTitleShow={false} />
+        <TitleSubtitle title={false} subTitle={false} />
-      </div>
+      </div> */}
       <BasicTable
         addTab={addTab}
         tabs={tabs}

src/components/TitleSubtitle/index.js

@@ -1,17 +1,30 @@
 import React from "react";
 
-const TitleSubtitle = ({ title, subTitle, titleShow, subTitleShow }) => {
+const TitleSubtitle = ({
+  title,
+  subTitle,
+  titleColor,
+  titleFontWeight,
+  titleFontSize,
+  titleDividerBgColor,
+  titleDividerWidth,
+  titleDividerHeight,
+}) => {
   return (
     <div>
       {/*  page Title */}
-      {titleShow && (
+      {title && (
         <div className="flex flex-row items-center">
-          <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
+          <div
-          <h2 className="text-base text-blue-900">{title}</h2>
+            className={`rounded ml-1 ${titleDividerBgColor} ${titleDividerWidth} ${titleDividerHeight}`}
+          ></div>
+          <h2 className={`${titleColor} ${titleFontWeight} ${titleFontSize}`}>
+            {title}
+          </h2>
         </div>
       )}
       {/* page subTitle */}
-      {subTitleShow && (
+      {subTitle && (
         <div className="flex flex-row items-center mt-4">
           <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
           <h2 className="text-xs">{subTitle}</h2>
@@ -27,6 +40,10 @@ TitleSubtitle.defaultProps = {
   title: "میزان فروش محصولات",
   subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
 
-  titleShow: true,
+  titleColor: "text-[#233876]",
-  subTitleShow: true,
+  titleFontWeight: "font-normal",
+  titleFontSize: "text-base",
+  titleDividerBgColor: "bg-blue-600",
+  titleDividerWidth: "w-1",
+  titleDividerHeight: "h-5",
 };