diff --git a/src/App.js b/src/App.js index 414f1c7..dc36917 100644 --- a/src/App.js +++ b/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() { {/* */} {/* */} + {/* */} {/* */} {/* */} diff --git a/src/components/AnimatedProgressBar/index.js b/src/components/AnimatedProgressBar/index.js new file mode 100644 index 0000000..e56c6b8 --- /dev/null +++ b/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 ( +
+
+
) +} + +export default AnimatedProgressBar + +AnimatedProgressBar.defaultProps = { + rangeWidth: "75%", + parentBg: "bg-gray-200", + childBg: "bg-gray-600", +} \ No newline at end of file diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js index 983683a..b499ef6 100644 --- a/src/components/CardTrelloDesign/index.js +++ b/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 }) => { /> + {/* progressBar */} + ); }; diff --git a/src/components/NewTagDesign/index.js b/src/components/NewTagDesign/index.js index 5eaf895..d8392fa 100644 --- a/src/components/NewTagDesign/index.js +++ b/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 (