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

master
Your Name 2 years ago
parent 180ee0ffc0
commit f3df09dafb
  1. 2
      src/App.js
  2. 24
      src/components/AnimatedProgressBar/index.js
  3. 3
      src/components/CardTrelloDesign/index.js
  4. 4
      src/components/NewTagDesign/index.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>

@ -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",
}

@ -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>
);
};

@ -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",

Loading…
Cancel
Save