update App.js and src/components/CardTrelloDesign/index.js

src/App.js

@@ -73,6 +73,7 @@ import SelectYear from "./components/SelectYear";
 import IndianaDragScroll from "./components/IndianaDragScroll";
 import TestComponentNew from "./components/TestComponentNew";
 import CardTrelloDesign from "./components/CardTrelloDesign";
+import CircleInCircle from "./components/CircleInCircle";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -139,14 +140,14 @@ function App() {
         {/* <CardHolder /> */}
         {/* <UploadFile /> */}
         {/* <BarChartApex /> */}
-        {/* <OutlineInput /> */}
+        <OutlineInput />
         {/* <ButtonNewDesign /> */}
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
+        <PopupCard />
         {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         {/* <SelectYear /> */}
@@ -154,6 +155,7 @@ function App() {
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <TestComponentNew /> */}
         <CardTrelloDesign />
+        {/* <CircleInCircle /> */}
       </div>
     </Provider>
   );

src/components/CardTrelloDesign/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import CircleInCircle from "../CircleInCircle";
 
 const CardTrelloDesign = () => {
   return (
@@ -6,9 +7,14 @@ const CardTrelloDesign = () => {
       {/* top */}
       <div className="flex flex-row">
         {/* right */}
-        <div className="bg-[#FF000044] w-7 h-7 rounded-full relative">
-          <div className="bg-[#FF0000] w-3 h-3 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2"></div>
-        </div>
+        <CircleInCircle
+          parentWidth={"w-6"}
+          parentHeight={"h-6"}
+          chidlWidth={"w-3"}
+          chidlHeight={"h-3"}
+          parentBg={"bg-[#FF000044]"}
+          childBg={"bg-[#FF0000]"}
+        />
         {/* left */}
         <div></div>
       </div>

src/components/CircleInCircle/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+const CircleInCircle = ({
+  parentWidth,
+  parentHeight,
+  chidlWidth,
+  chidlHeight,
+  parentBg,
+  childBg,
+}) => {
+  return (
+    <div
+      className={` ${parentBg} ${parentWidth} ${parentHeight}  rounded-full relative `}
+    >
+      <div
+        className={`${childBg} ${chidlWidth} ${chidlHeight} rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
+      ></div>
+    </div>
+  );
+};
+
+export default CircleInCircle;
+
+CircleInCircle.defaultProps = {
+  parentWidth: "w-5",
+  parentHeight: "h-5",
+  chidlWidth: "w-2",
+  chidlHeight: "h-2",
+  parentBg: "bg-red-200",
+  childBg: "bg-red-600",
+};