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 (
-      <Chart
-        options={this.state.options}
-        series={this.state.series}
-        type="donut"
-        height="320px"
-        width="100%"
-      />
+      <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>
     );
   }
 }