update App.js, src/components/Button/index.js and src/components/CardDesign2/index.js

src/App.js

@@ -138,11 +138,11 @@ function App() {
         {/* <GridListTable /> */}
         {/* <PopupCard /> */}
         {/* <TimeLine /> */}
-        <CardTrelloDesign />
+        {/* <CardTrelloDesign /> */}
         {/* <ReligiousTimes /> */}
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
-        {/* <CardDesign2 /> */}
+        <CardDesign2 />
         {/* *************************************************** mini components ***************************************************  */}
         {/* <AnimatedProgressBar /> */}
         {/* <CircleInCircle /> */}

src/components/Button/index.js

@@ -3,7 +3,7 @@ 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}`}
+      className={`flex items-center transiton duration-200 hover:bg-opacity-70 ${className}`}
     >
       {text}
       {icon && (

src/components/CardDesign2/index.js

@@ -1,7 +1,68 @@
 import React from "react";
+import IconText from "../IconText";
+import Button from "../Button";
+import TitleSubtitle from "../TitleSubtitle";
 
-const CardDesign2 = () => {
+const CardDesign2 = ({ buttons }) => {
-  return <div>CardDesign2</div>;
+  return (
+    <div className="flex flex-col bg-white shadow-sm rounded max-w-[396px] mr-20 my-20 p-4">
+      <TitleSubtitle
+        subTitle={false}
+        title={"طبقه سوم"}
+        titleColor={"text-[#0F0543]"}
+        titleFontWeight={"font-bold"}
+        titleDividerBgColor={"bg-[#1FF87D]"}
+        titleDividerWidth={"w-1.5"}
+      />
+      <IconText />
+      <div className="flex flex-wrap gap-y-2 justify-center mt-4">
+        {buttons.map((btn) => (
+          <Button
+            className={`${btn.className} w-1/2 border-none px-4 py-4 text-xs rounded-sm text-white`}
+            text={btn.name}
+          />
+        ))}
+      </div>
+      <Button />
+    </div>
+  );
 };
 
 export default CardDesign2;
+
+CardDesign2.defaultProps = {
+  buttons: [
+    {
+      name: "پنجره",
+      className: "bg-[#FFF7BF]",
+    },
+    {
+      name: "کمک اولیه",
+      className: "bg-[#DBFDFF]",
+    },
+    {
+      name: "درب خروجی",
+      className: "bg-[#828282]",
+    },
+    {
+      name: "سیستم سرمایش",
+      className: "bg-[#F6FFEB]",
+    },
+    {
+      name: "آب سردکن",
+      className: "bg-[#F0FFB4]",
+    },
+    {
+      name: "سرویس بهداشتی",
+      className: "bg-[#FFDD8E]",
+    },
+    {
+      name: "حمام",
+      className: "bg-[#EEEFFF]",
+    },
+    {
+      name: "تخت",
+      className: "bg-[#FFF5EE]",
+    },
+  ],
+};