update

src/components/CardHolder/index.js

@@ -13,10 +13,10 @@ const CardHolder = ({
   cardBorderRadius,
 }) => {
   return (
-    <div className="">
+    <div className="w-full">
       {items.map((item, index) => (
         <div
-          className={`w-full px-2 py-1 flex flex-row items-center mt-4 ${cardBorder} ${cardBorderRadius}
+          className={`px-2 py-1 flex flex-row items-center mt-4 ${cardBorder} ${cardBorderRadius}
            ${item.active === true ? "bg-blue-100" : "bg-white"}
           `}
           style={{

src/components/SemiDonut/index.js

@@ -51,13 +51,25 @@ class SemiDonut extends Component {
 
   render() {
     return (
+      <div className=" relative">
         <Chart
           options={this.state.options}
           series={this.state.series}
           type="donut"
           height="320px"
           width="100%"
+          className=""
         />
+        <span className="font-bold text-blue-400 text-lg absolute left-1/2 bottom-60 transform -translate-x-1/2 -translate-y-1/2">
+          899GB
+        </span>
+        <span
+          style={{ fontSize: "10px" }}
+          className="text-xs absolute left-1/2 bottom-56 transform -translate-x-1/2 -translate-y-1/2"
+        >
+          استفاده شده از 1000 گیگابایت
+        </span>
+      </div>
     );
   }
 }