FEAT: added the background gardient

package.json

@@ -14,7 +14,8 @@
     "@tremor/react": "^3.13.4",
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-rough-notation": "^1.0.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

src/Components/FollowerAnalysis/FollowerProgress.tsx

@@ -1,45 +1,66 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Card,
   Flex,
   ProgressCircle,
   BadgeDelta,
 } from "@tremor/react";
-import {FollowerAnalysis} from "@/Interface/api.interface";
+import { RoughNotation } from "react-rough-notation";
+import { FollowerAnalysis } from "@/Interface/api.interface";
 
 const FollowerProgress: React.FC<FollowerAnalysis> = ({
   followerCount,
   increaseOrDecrease,
 }) => {
-  console.log(followerCount);
+  const [show, setShow] = useState(true); 
+
+
+
   return (
-    <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor: "#FF1E56" }}>
-      <h2 className="followerCardTitle font-mono">Followers</h2>
-      <Flex>
-        <ProgressCircle
-          className="followerProgressCircle"
-          value={followerCount}
-          radius={40}
-          strokeWidth={10}
-          tooltip="Followers"
-          color={"green"}
-        > <span className="text-md text-gray-700 font-large ">{followerCount}</span></ProgressCircle>
-        {increaseOrDecrease === "no_change" ? (
-          <BadgeDelta deltaType="unchanged" isIncreasePositive={true}
-          size="sm" color={"green"}>No Change</BadgeDelta>
-        ) : (
-          <BadgeDelta
-            className="followerBadge"
-            deltaType="moderateIncrease"
-            isIncreasePositive={true}
-            size="sm"
+    <div className="relative group items-start justify-center">
+      <div className="bb w-full absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+      <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor:"black" }}>
+        <div className="mb-3">
+      {show && ( // Conditional rendering based on show state
+          <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
+            <h2 className="followerCardTitle font-mono">Followers</h2>
+          </RoughNotation>
+        )}
+        </div>
+        <Flex>
+          <ProgressCircle
+            className="followerProgressCircle"
+            value={followerCount}
+            radius={40}
+            strokeWidth={10}
+            tooltip="Followers"
             color={"green"}
           >
-            Increase
-          </BadgeDelta>
-        )}
-      </Flex>
-    </Card>
+            <span className="text-md text-gray-700 font-large ">{followerCount}</span>
+          </ProgressCircle>
+          {increaseOrDecrease === "no_change" ? (
+            <BadgeDelta
+              deltaType="unchanged"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              No Change
+            </BadgeDelta>
+          ) : (
+            <BadgeDelta
+              className="followerBadge"
+              deltaType="moderateIncrease"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              Increase
+            </BadgeDelta>
+          )}
+        </Flex>
+      </Card>
+    </div>
   );
 };
 

src/Components/FollowerAnalysis/FollowingProgress.tsx

@@ -1,20 +1,29 @@
-import React from "react";
+import React , {useState} from "react";
 import {
   Card,
   Flex,
   ProgressCircle,
   BadgeDelta,
 } from "@tremor/react";
+import { RoughNotation } from "react-rough-notation";
 import {FollowingAnalysis} from "@/Interface/api.interface";
 
 const FollowingProgress: React.FC<FollowingAnalysis> = ({
   followingCount,
   increaseOrDecrease,
 }) => {
-
+  const [show, setShow] = useState(true); // Define and initialize the state variable
   return (
-    <Card className="followerCard " style={{ backgroundColor: "#F8FFD2" }}>
-      <h2 className="followerCardTitle font-mono">Following</h2>
+    <div className="relative group items-start justify-center">
+    <div className="bb w-full absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+    <Card className="followerCard " style={{ backgroundColor: "black" }}>
+    <div className="mb-3">
+      {show && ( 
+          <RoughNotation type="underline" show={show} color="red" strokeWidth={5}>
+            <h2 className="followerCardTitle font-mono">Followers</h2>
+          </RoughNotation>
+        )}
+        </div>
       <Flex>
         <ProgressCircle
           className="followerProgressCircle"
@@ -41,6 +50,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
         )}
       </Flex>
     </Card>
+    </div>
   );
 };
 

src/Components/LanguageAnalysis/LanguageCount.tsx

@@ -13,6 +13,8 @@ const LanguageCount: React.FC<LanguageCountProps> = ({ languageCounts }) => {
   }));
 
   return (
+    <div className="relative group items-start justify-center">
+    <div className="ml-10 langGradientBack  w-full absolute -inset-0.5 bg-gradient-to-r from-yellow-600 to-orange-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
     <Card className="langCountCard ">
       <BarChart
         className="mt-6"
@@ -24,6 +26,7 @@ const LanguageCount: React.FC<LanguageCountProps> = ({ languageCounts }) => {
         yAxisWidth={56}
       />
     </Card>
+    </div>
   );
 };
 

src/Styles/Dashboard/followerProgress.css

@@ -12,11 +12,12 @@
 
   }
 
+
   .followerCardTitle {
     font-size: 15px;
     font-weight: bolder;
     margin-top: 0;
-    color: black;
+    color: white;
   }
 
   .followerProgressCircle {
@@ -37,5 +38,9 @@
   border-radius: 50px;
   z-index: 1;
   }
+  .bb{
+    margin-left: 10%;
+    border-radius: 30px;
+  }
 
 

src/Styles/Dashboard/langCount.css

@@ -0,0 +1,3 @@
+.langGradientBack{
+    border-radius: 30px;
+}

src/app/Dashboard/page.tsx

@@ -70,7 +70,7 @@ return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !=
   <div>
     <div className="flex flex-row basis-20 mt-10">
       <div className="drop-shadow-2xl">
-      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3 ">
+      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3">
         <FollowerProgress
           followerCount={followerAnlData.followerCount}
           increaseOrDecrease={followerAnlData.increaseOrDecrease}

src/app/globals.css

@@ -17,7 +17,7 @@
 }
 
 body{
-  background-color: #F5EEE6;
+  background-color: black;
 }
 
 

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import "../Styles/Dashboard/followerProgress.css"
+import "../Styles/Dashboard/langCount.css"
 
 const inter = Inter({ subsets: ["latin"] });