From 2ae3ea6e406b64a6a16514d78e8c0b23dc39fd8e Mon Sep 17 00:00:00 2001
From: techmannih <manishchaudharyttt@gmail.com>
Date: Tue, 15 Oct 2024 15:33:09 +0530
Subject: [PATCH] feat: add a dock for mobile screens with socials as option

---
 components/community.css | 37 +++++++++++++++++++++++++++++++++++
 components/community.tsx | 42 ++++++++++++++++++++++------------------
 package-lock.json        | 22 ++++++++++++++++-----
 3 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/components/community.css b/components/community.css
index 571d6ef6..e99ffae6 100644
--- a/components/community.css
+++ b/components/community.css
@@ -15,3 +15,40 @@
   margin: calc(-100px / 2);
   width: 250px;
 }
+.social-cloud {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2em 0;
+}
+
+@media (max-width: 768px) {
+  .link-1,
+  .link-2,
+  .link-3,
+  .link-4,
+  .link-5 {
+    height: 60px;
+    width: 60px;
+    margin-left: 10px;
+  }
+  .social-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    margin-left: 10px;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+    position: relative;
+  }
+  .social-link p {
+    display: none;
+  }
+  .social-link:hover {
+    transform: scale(1.2);
+  }
+}
diff --git a/components/community.tsx b/components/community.tsx
index 051f2ea5..78b96222 100644
--- a/components/community.tsx
+++ b/components/community.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+'use client';
+
+import React, { useState } from "react";
 import "./community.css";
 import Image from "next/image";
 import CommunityBunny from "@/public/images/community-bunny.png";
@@ -38,9 +40,7 @@ const createCircleStyles = (
   const dangle = 360 / totalCircles;
   const currentAngle = angle + dangle * index;
   return {
-    transform: `rotate(${currentAngle}deg) translate(${
-      containerWidth / 2
-    }px) rotate(-${currentAngle}deg)`,
+    transform: `rotate(${currentAngle}deg) translate(${containerWidth / 2}px) rotate(-${currentAngle}deg)`,
   };
 };
 
@@ -77,6 +77,7 @@ function SocialLinkCard({
 }
 
 export default function Community() {
+  const [value, setValue] = useState("Where Code Meets Community!");
   const cardsData: CardData[] = [
     {
       link: "https://twitter.com/Keployio",
@@ -110,10 +111,7 @@ export default function Community() {
     },
   ];
 
-  // Define the number of circles you want to render
   const totalCircles = cardsData.length;
-
-  // You can adjust this width as per your requirement or dynamically based on the parent component's state
   const containerWidth = 600;
 
   const cardsSurround = Array.from({ length: totalCircles }, (_, index) => (
@@ -128,18 +126,8 @@ export default function Community() {
     />
   ));
 
-  const cardsList = Array.from({ length: totalCircles }, (_, index) => (
-    <SocialLinkCard
-      key={index}
-      link={cardsData[index].link}
-      svgIcon={cardsData[index].svgIcon}
-      platformName={cardsData[index].platformName}
-      description={cardsData[index].description}
-    />
-  ));
-
   return (
-    <section className="relative py-8 ">
+    <section className="relative py-8">
       <div className="max-w-3xl mx-auto text-center">
         <h2 className="h2 text-secondary-300">
           🐰 Join the Keploy community ✨
@@ -157,7 +145,23 @@ export default function Community() {
         </div>
         <div className="md:hidden">
           <Image src={CommunityBunny} alt="Image" className="w-3/4 mx-auto" />
-          {cardsList}
+          <div className="social-cloud md:gap-2 lg:gap-2 sm:gap-0">
+            {cardsData.map((link, index) => (
+              <a
+                key={index}
+                href={link.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`social-link link-${index + 1}`}
+                title={link.platformName}
+                onMouseEnter={() => setValue(link.description)}
+                onMouseLeave={() => setValue("Where Code Meets Community!")}
+              >
+                <Image src={link.svgIcon} alt={link.platformName} />
+              </a>
+            ))}
+          </div>
+          <p className='text-center text-xl text-gray-700'>{value}</p>
         </div>
       </div>
     </section>
diff --git a/package-lock.json b/package-lock.json
index ea18b9c3..1fa21ead 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "framer-motion": "^10.16.14",
         "gsap": "^3.12.5",
         "next": "^14.2.3",
+        "next-themes": "^0.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-responsive-carousel": "^3.2.23",
@@ -51,7 +52,7 @@
         "globals": "^15.8.0",
         "postcss": "^8.4.24",
         "sharp": "^0.32.6",
-        "tailwindcss": "^3.3.2",
+        "tailwindcss": "^3.4.7",
         "typescript": "5.4.3",
         "typescript-eslint": "^7.18.0",
         "web-vitals": "^3.5.2"
@@ -8695,6 +8696,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -11411,10 +11422,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
+      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -11424,7 +11436,7 @@
         "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
+        "jiti": "^1.21.0",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",