From e082129d05cef7bcac47e5bbe97ea4936391a4ac Mon Sep 17 00:00:00 2001
From: SANKALP PANDEY <tigerishan426@gmail.com>
Date: Thu, 22 Feb 2024 19:36:31 +0530
Subject: [PATCH] FEAT: added the restyricted screen size query

---
 src/Styles/Dashboard/main.css |  12 ++
 src/app/Dashboard/page.tsx    | 242 ++++++++++++++++++----------------
 src/app/page.tsx              |  12 +-
 3 files changed, 150 insertions(+), 116 deletions(-)

diff --git a/src/Styles/Dashboard/main.css b/src/Styles/Dashboard/main.css
index 6b1fbc1..ee472dd 100644
--- a/src/Styles/Dashboard/main.css
+++ b/src/Styles/Dashboard/main.css
@@ -20,4 +20,16 @@ h2 , h3 , span ,p{
 }
 .y{
 font-size: 17px;
+}
+.screenSizeDiv{
+
+margin-top: 55%;
+    width: 100%;
+    height: 100px;
+
+    
+}
+.screenTitle{
+    font-family: "Shantell Sans", cursive;
+    font-size: 30px;
 }
\ No newline at end of file
diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
index 976ba52..942ac12 100644
--- a/src/app/Dashboard/page.tsx
+++ b/src/app/Dashboard/page.tsx
@@ -110,6 +110,19 @@ const VersionDashboard: React.FC = () => {
   const [oldestRepoCard, setShowOldestRepoCard] = useState(true);
   const [newestRepoCard, setNewRepoCard] = useState(false);
   const [show, setShow] = useState(true);
+  const [smallScreen , setSmallScreen] = useState(false)
+
+  const checkScreenSize = ()=>{
+
+      const isMobile = typeof window !== 'undefined' && window.matchMedia("(max-width:1024px)").matches;
+      if (isMobile) {
+      setSmallScreen(true)
+      }
+      else{
+        setSmallScreen(false)
+      }
+
+  }
 
   const getFollowerAnalysisData = async () => {
     try {
@@ -284,6 +297,7 @@ const VersionDashboard: React.FC = () => {
   };
 
   useEffect(() => {
+    checkScreenSize()
     getFollowerAnalysisData();
     getFollowingAnalysisData();
     getLanguageCountAnalysisData();
@@ -297,91 +311,99 @@ const VersionDashboard: React.FC = () => {
     getTotalStarData();
   }, []);
 
-  return followerAnlData.followerCount !== 0 &&
-    followingAnlData.followingCount !== 0 ? (
+  return smallScreen ? (
+    <div className="text-center screenSizeDiv">
+    <h1 className="text-white screenTitle font-extrabold">
+      For the perfect view, kindly visit this website on the desktop.
+    </h1>
+  </div>
+  ) : (
     <div>
-      <div className="flex flex-row basis-20 mt-10">
-        <div className="drop-shadow-2xl">
-          <Grid numItems={1} numItemsSm={1} numItemsLg={2} className="gap-3">
-            <FollowerProgress
-              followerCount={followerAnlData.followerCount}
-              increaseOrDecrease={followerAnlData.increaseOrDecrease}
-            />
-            <FollowingProgress
-              followingCount={followingAnlData.followingCount}
-              increaseOrDecrease={followerAnlData.increaseOrDecrease}
+    <div className="flex flex-row basis-20 mt-10">
+      <div className="drop-shadow-2xl">
+        <Grid numItems={1} numItemsSm={1} numItemsLg={2} className="gap-3">
+          <FollowerProgress
+            followerCount={followerAnlData.followerCount}
+            increaseOrDecrease={followerAnlData.increaseOrDecrease}
+          />
+          <FollowingProgress
+            followingCount={followingAnlData.followingCount}
+            increaseOrDecrease={followerAnlData.increaseOrDecrease}
+          />
+        </Grid>
+        <Grid numItems={1} numItemsLg={2} numItemsSm={1}>
+          <div>
+            <TotalStarProgress TotalStarsCount={totalStar.TotalStarsCount} />
+          </div>
+          <div>
+            <RepoProgress
+              RepoCount={repoCount.RepoCount}
+              increaseOrDecrease={repoCount.increaseOrDecrease}
             />
-          </Grid>
-          <Grid numItems={1} numItemsLg={2} numItemsSm={1}>
-            <div>
-              <TotalStarProgress TotalStarsCount={totalStar.TotalStarsCount} />
-            </div>
-            <div>
-              <RepoProgress
-                RepoCount={repoCount.RepoCount}
-                increaseOrDecrease={repoCount.increaseOrDecrease}
-              />
-            </div>
-
-            <div>
-              <TopRepoStatus topRepo={topRepo} />
-        
-            </div>
-            <div className="notationDiv">
-              <Image src={NotationImage} alt="demo" className="demo ml-5"/>
-            </div>
-          </Grid>
-
-            <div>
-              {mostRecCommit && (
-                <RecentCommitProgress mostRecentCommit={mostRecCommit} />
-              )}
-            </div>
+          </div>
 
-        </div>
-        <div className="langCountCardContainer drop-shadow-2xl">
           <div>
-            <LanguageCount languageCounts={langCount} />
+            <TopRepoStatus topRepo={topRepo} />
           </div>
-<div className="heroTitleDiv mt-10 ml-20">
-<RoughNotation
-                  type="box"
-                  strokeWidth={5}
-                  color="yellow"
-                  show={show}
-                  multiline={true}
-                >
-  <h2 className="heroTitle text-white">Welcomeeeee <span> <p className="text-orange-500 y">Crafted By - Sankalp's Github Profile </p></span></h2>
-  </RoughNotation>
-</div>
-          <div className="repoFlexBox ml-10 relative group items-start justify-center">
-            <div className="repoGradinetBack w-full absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
-            <Card className="bg-black repoFlexCard ">
-              <div className="flex flex-row gap-5 mb-5 repoFlexHeading">
-                <RoughNotation
-                  type="box"
-                  strokeWidth={5}
-                  color="red"
-                  show={show}
-                >
-                  {" "}
-                  <h3
-                    onClick={() => {
-                      setNewRepoCard(false), setShowOldestRepoCard(true);
-                    }}
-                    className="text-blue-600 font-extrabold font-mono hover:text-yellow-300 hover:cursor-pointer"
-                  >
-                    Oldest Repo
-                    
-                  </h3>
-                </RoughNotation>
-                <span className="borderLeft ml-3"></span>
-                <RoughNotation
-                  type="box"
-                  strokeWidth={5}
-                  color="yellow"
-                  show={show}
+          <div className="notationDiv">
+            <Image src={NotationImage} alt="demo" className="demo ml-5" />
+          </div>
+        </Grid>
+
+        <div>
+          {mostRecCommit && <RecentCommitProgress mostRecentCommit={mostRecCommit} />}
+        </div>
+      </div>
+      <div className="langCountCardContainer drop-shadow-2xl">
+        <div>
+          <LanguageCount languageCounts={langCount} />
+        </div>
+        <div className="heroTitleDiv mt-10 ml-20">
+          <RoughNotation
+            type="box"
+            strokeWidth={5}
+            color="yellow"
+            show={show}
+            multiline={true}
+          >
+            <h2 className="heroTitle text-white">
+              Welcomeeeee{" "}
+              <span>
+                {" "}
+                <p className="text-orange-500 y">
+                  Crafted By - Sankalp's Github Profile{" "}
+                </p>
+              </span>
+            </h2>
+          </RoughNotation>
+        </div>
+        <div className="repoFlexBox ml-10 relative group items-start justify-center">
+          <div className="repoGradinetBack w-full absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+          <Card className="bg-black repoFlexCard ">
+            <div className="flex flex-row gap-5 mb-5 repoFlexHeading">
+              <RoughNotation
+                type="box"
+                strokeWidth={5}
+                color="red"
+                show={show}
+              >
+                {" "}
+                <h3
+                  onClick={() => {
+                    setNewRepoCard(false), setShowOldestRepoCard(true);
+                  }}
+                  className="text-blue-600 font-extrabold font-mono hover:text-yellow-300 hover:cursor-pointer"
                 >
+                  Oldest Repo
+                </h3>
+              </RoughNotation>
+              <span className="borderLeft ml-3"></span>
+              <RoughNotation
+                type="box"
+                strokeWidth={5}
+                color="yellow"
+                show={show}
+              >
                 <h3
                   onClick={() => {
                     setNewRepoCard(true), setShowOldestRepoCard(false);
@@ -390,41 +412,39 @@ const VersionDashboard: React.FC = () => {
                 >
                   Newest Repo
                 </h3>
-                </RoughNotation>
-              </div>
-              <div className="">
-                {oldestRepoCard && (
-                  <div>{oldRepo && <OldRepoProgress repoData={oldRepo} />}</div>
-                )}
-                {newestRepoCard && (
-                  <div>
-                    <div>
-                      {oldRepo && <NewRepoProgress repoData={oldRepo} />}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </Card>
-          </div>
+              </RoughNotation>
+            </div>
+            <div className="">
+              {oldestRepoCard && (
+                <div>{oldRepo && <OldRepoProgress repoData={oldRepo} />}</div>
+              )}
+              {newestRepoCard && (
+                <div>
+                  <div>{oldRepo && <NewRepoProgress repoData={oldRepo} />}</div>
+                </div>
+              )}
+            </div>
+          </Card>
         </div>
+      </div>
 
-        <div>
-          <PullRequestProgress
-            OpenCount={issueCount.OpenCount}
-            ClosedCount={issueCount.ClosedCount}
-          />
-          <TopicProgress topicCounts={topicCount} />
-          <TotalLangProgress
-            TotalCodePushedSinceJoingingGit={
-              totalCount.TotalCodePushedSinceJoingingGit
-            }
-          />
-        </div>
+      <div>
+        <PullRequestProgress
+          OpenCount={issueCount.OpenCount}
+          ClosedCount={issueCount.ClosedCount}
+        />
+        <TopicProgress topicCounts={topicCount} />
+        <TotalLangProgress
+          TotalCodePushedSinceJoingingGit={
+            totalCount.TotalCodePushedSinceJoingingGit
+          }
+        />
       </div>
     </div>
-  ) : (
-    <></>
+  </div>
   );
-};
+  };  
+
+
+  export default VersionDashboard
 
-export default VersionDashboard;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index eeb2a19..0293890 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,14 @@
-import Image from "next/image";
-
-import "../Styles/Dashboard/followerProgress.css"
 
+import React from 'react';
+import "../Styles/Dashboard/followerProgress.css";
 
 export default function Home() {
-  return (
-<h1>nkn</h1>
 
 
+  return (
+    <div>
+      <h1>Welcome to Desktop Version</h1>
+      <h1>Other Content</h1>
+    </div>
   );
 }