Ye to sach hai ki bhagwan hai lekin tu fir bhi bhagwan se nahi darta

Blaster4385 · Apr 3, 2024 · 66e51ed · 66e51ed
1 parent abad010
commit 66e51ed
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 106 deletions.
diff --git a/src/components/Cards/AboutCard.jsx b/src/components/Cards/AboutCard.jsx
@@ -1,15 +1,16 @@
 import React from "react";
 import styles from "./AboutCard.module.css";
-import { useContext, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { Context } from "../../constants";
 import useDragger from "../../hooks/useDragger";
 
 const AboutCard = () => {
   const [maximise, setMaximise] = useState(false);
   const { openArray, setOpenArray } = useContext(Context);
-  console.log(openArray.About);
-
-  useDragger("about", setMaximise);
+
+  const dragHandle = useRef();
+
+  useDragger("about", setMaximise, dragHandle);
 
   return (
     <div
@@ -24,24 +25,24 @@ const AboutCard = () => {
             : styles.card
       }
     >
-      <button
-        className={styles.card__close__button}
-        onClick={() =>
-          setOpenArray({
-            ...openArray,
-            About: !openArray.About,
-          })
-        }
-      >
-        &times;
-      </button>
-      <button
-        className={styles.card__maximise__button}
-        onClick={() => setMaximise(!maximise)}
-      >
-        &#x2610;
-      </button>
-      <div>
+      <div className={styles.card__header} ref={dragHandle}>
+        <button
+          className={styles.card__close__button}
+          onClick={() =>
+            setOpenArray({
+              ...openArray,
+              About: !openArray.About,
+            })
+          }
+        >
+          &times;
+        </button>
+        <button
+          className={styles.card__maximise__button}
+          onClick={() => setMaximise(!maximise)}
+        >
+          &#x2610;
+        </button>
         <h1 className={styles.card__title}>About</h1>
       </div>
       <div className={styles.card__content}>

diff --git a/src/components/Cards/AboutCard.module.css b/src/components/Cards/AboutCard.module.css
@@ -13,12 +13,19 @@
   transition:
     visibility 0.3s ease-in-out,
     transform 0.3s ease-in-out,
-    scale 0.3s, 
-    height 0.3s, 
+    scale 0.3s,
+    height 0.3s,
     width 0.3s;
   transform: scale(0);
 }
 
+.card__header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
 .card__open {
   visibility: visible;
   transform: scale(1);

diff --git a/src/components/Cards/ContactCard.jsx b/src/components/Cards/ContactCard.jsx
@@ -1,14 +1,15 @@
 import React from "react";
 import styles from "./ContactCard.module.css";
-import { useContext, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { Context } from "../../constants";
 import useDragger from "../../hooks/useDragger";
 
 const ContactCard = ({ open, setOpen }) => {
   const [maximise, setMaximise] = useState(false);
   const { openArray, setOpenArray } = useContext(Context);
+  const dragHandle = useRef();
 
-  useDragger("contact", setMaximise);
+  useDragger("contact", setMaximise, dragHandle);
 
   return (
     <div
@@ -19,28 +20,28 @@ const ContactCard = ({ open, setOpen }) => {
             ? `${styles.card} ${styles.card__open} ${styles.card__maximise}`
             : `${styles.card} ${styles.card__maximise}`
           : openArray.Contact
-          ? `${styles.card} ${styles.card__open}`
-          : styles.card
+            ? `${styles.card} ${styles.card__open}`
+            : styles.card
       }
     >
-      <button
-        className={styles.card__close__button}
-        onClick={() =>
-          setOpenArray({
-            ...openArray,
-            Contact: !openArray.Contact,
-          })
-        }
-      >
-        &times;
-      </button>
-      <button
-        className={styles.card__maximise__button}
-        onClick={() => setMaximise(!maximise)}
-      >
-        &#x2610;
-      </button>
-      <div>
+      <div className={styles.card__header} ref={dragHandle}>
+        <button
+          className={styles.card__close__button}
+          onClick={() =>
+            setOpenArray({
+              ...openArray,
+              Contact: !openArray.Contact,
+            })
+          }
+        >
+          &times;
+        </button>
+        <button
+          className={styles.card__maximise__button}
+          onClick={() => setMaximise(!maximise)}
+        >
+          &#x2610;
+        </button>
         <h1 className={styles.card__title}>Contact Me</h1>
       </div>
       <div className={styles.card__content}>

diff --git a/src/components/Cards/ContactCard.module.css b/src/components/Cards/ContactCard.module.css
@@ -13,12 +13,19 @@
   transition:
     visibility 0.3s ease-in-out,
     transform 0.3s ease-in-out,
-    scale 0.3s, 
-    height 0.3s, 
+    scale 0.3s,
+    height 0.3s,
     width 0.3s;
   transform: scale(0);
 }
 
+.card__header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
 .card__open {
   visibility: visible;
   transform: scale(1);
@@ -136,4 +143,3 @@
     display: none;
   }
 }
-
diff --git a/src/components/Cards/ProjectsCard.jsx b/src/components/Cards/ProjectsCard.jsx
@@ -1,14 +1,15 @@
 import React from "react";
 import styles from "./ProjectsCard.module.css";
-import { useContext, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { Context } from "../../constants";
 import useDragger from "../../hooks/useDragger";
 
 const ProjectsCard = () => {
   const [maximise, setMaximise] = useState(false);
   const { openArray, setOpenArray } = useContext(Context);
+  const dragHandle = useRef();
 
-  useDragger("projects", setMaximise);
+  useDragger("projects", setMaximise, dragHandle);
 
   const data = [
     {
@@ -60,28 +61,28 @@ const ProjectsCard = () => {
             ? `${styles.card} ${styles.card__open} ${styles.card__maximise}`
             : `${styles.card} ${styles.card__maximise}`
           : openArray.Projects
-          ? `${styles.card} ${styles.card__open}`
-          : styles.card
+            ? `${styles.card} ${styles.card__open}`
+            : styles.card
       }
     >
-      <button
-        className={styles.card__close__button}
-        onClick={() =>
-          setOpenArray({
-            ...openArray,
-            Projects: !openArray.Projects,
-          })
-        }
-      >
-        &times;
-      </button>
-      <button
-        className={styles.card__maximise__button}
-        onClick={() => setMaximise(!maximise)}
-      >
-        &#x2610;
-      </button>
-      <div>
+      <div className={styles.card__header} ref={dragHandle}>
+        <button
+          className={styles.card__close__button}
+          onClick={() =>
+            setOpenArray({
+              ...openArray,
+              Projects: !openArray.Projects,
+            })
+          }
+        >
+          &times;
+        </button>
+        <button
+          className={styles.card__maximise__button}
+          onClick={() => setMaximise(!maximise)}
+        >
+          &#x2610;
+        </button>
         <h1 className={styles.card__title}>Projects</h1>
       </div>
       {data.map((item) => (

diff --git a/src/components/Cards/ProjectsCard.module.css b/src/components/Cards/ProjectsCard.module.css
@@ -13,15 +13,22 @@
   transition:
     visibility 0.3s ease-in-out,
     transform 0.3s ease-in-out,
-    scale 0.3s, 
-    height 0.3s, 
+    scale 0.3s,
+    height 0.3s,
     width 0.3s;
   transform: scale(0);
   overflow-y: scroll;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
 }
 
+.card__header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
 .card::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
@@ -189,4 +196,3 @@
     display: none;
   }
 }
-