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

src/App.js

@@ -75,6 +75,7 @@ import TestComponentNew from "./components/TestComponentNew";
 import CardTrelloDesign from "./components/CardTrelloDesign";
 import CircleInCircle from "./components/CircleInCircle";
 import NewTagDesign from "./components/NewTagDesign";
+import AnimatedProgressBar from "./components/AnimatedProgressBar";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -156,6 +157,7 @@ function App() {
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <TestComponentNew /> */}
         <CardTrelloDesign />
+        {/* <AnimatedProgressBar /> */}
         {/* <CircleInCircle /> */}
         {/* <NewTagDesign /> */}
       </div>

src/components/AnimatedProgressBar/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
+    const [progressBar, setProgressBar] = useState(false);
+
+    useEffect(() => {
+      setTimeout(() => {
+        setProgressBar(true);
+      }, 1000);
+    }, []);
+  
+  return (
+<div className={`flex-row w-full  rounded-full h-2 mt-4 ${parentBg}`} style={{direction: "ltr"}}>
+  <div className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`} style={{ width: progressBar ? rangeWidth : 0}}></div>
+</div>  )
+}
+
+export default AnimatedProgressBar
+
+AnimatedProgressBar.defaultProps = {
+    rangeWidth: "75%",
+    parentBg: "bg-gray-200",
+    childBg: "bg-gray-600",
+}

src/components/CardTrelloDesign/index.js

@@ -10,6 +10,7 @@ import clock from "./images/clock.svg";
 import nike from "./images/nike.svg";
 import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
+import AnimatedProgressBar from "../AnimatedProgressBar";
 
 const CardTrelloDesign = ({ circle, pictures }) => {
   return (
@@ -118,6 +119,8 @@ const CardTrelloDesign = ({ circle, pictures }) => {
           />
         </div>
       </div>
+      {/* progressBar */}
+      <AnimatedProgressBar rangeWidth={"39%"} parentBg={"bg-[#E3E3E3]"} childBg={"bg-[#06BACE]"} />
     </div>
   );
 };

src/components/NewTagDesign/index.js

@@ -9,6 +9,7 @@ const NewTagDesign = ({
   tagBorderColor,
   icon,
   fontSize,
+  fontWeight,
   border,
   borderRadius,
   iconWidth,
@@ -20,7 +21,7 @@ const NewTagDesign = ({
 }) => {
   return (
     <button
-      className={`flex ${align} items-center ${borderRadius} ${paddingY} ${paddingX} ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
+      className={`flex ${align} ${fontWeight} items-center ${borderRadius} ${paddingY} ${paddingX} ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
     >
       {title}
       {icon && (
@@ -45,6 +46,7 @@ NewTagDesign.defaultProps = {
   borderRadius: "rounded-full",
   tagBorderColor: "border-blue-600",
   fontSize: "text-xs",
+  fontWeight: "font-bold",
   iconWidth: "w-2.5",
   marginRight: "mr-5",
   paddingY: "p-2",