From 72cb79d3bbdaff262d7183c6b9dd5b3fd54fe39d Mon Sep 17 00:00:00 2001
From: Shadow <nintendothing123@gmail.com>
Date: Sun, 15 Sep 2024 23:34:22 -0700
Subject: [PATCH] when you click on card link works

---
 src/components/user/resources/Hackpack.tsx | 58 ++++++++++++----------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/components/user/resources/Hackpack.tsx b/src/components/user/resources/Hackpack.tsx
index 07c46e699..3261fff2a 100644
--- a/src/components/user/resources/Hackpack.tsx
+++ b/src/components/user/resources/Hackpack.tsx
@@ -11,36 +11,42 @@ type props = {
 
 const Hackpack = ({ text, techs, link, description }: props) => {
   return (
-    <div className="rounded-xl bg-white p-3">
-      <Link
-        data-cy="hackpack-link"
-        className="flex items-center justify-between opacity-100 hover:opacity-70"
-        href={link}
-        target="_black"
-      >
-        <p className="text-lg font-semibold" data-cy="hackpack-text">
-          {text}
-        </p>
-        <Github size={20} />
-      </Link>
+    <Link
+      data-cy="hackpack-link"
+      className="rounded-x1 block w-full bg-white p-3 opacity-100 hover:opacity-70"
+      href={link}
+      target="_black"
+    >
+      <div className="flex h-full flex-col justify-between">
+        <div className="flex items-center justify-between">
+          <div className="rounded-xl bg-white p-3">
+            <p className="text-lg font-semibold" data-cy="hackpack-text">
+              {text}
+            </p>
+            <Github size={20} />
 
-      <div className="my-2 flex flex-wrap gap-2" data-cy="hackpack-techs">
-        {techs.map((tech, index) => (
-          <div
-            key={index}
-            className="flex items-center gap-2 text-gray-400"
-            data-cy="hackpack-tech"
-          >
-            <div className="text-hackathon-blue-100" data-cy="hackpack-icon">
-              {TECHSTACKS[tech]}
+            <div className="my-2 flex flex-wrap gap-2" data-cy="hackpack-techs">
+              {techs.map((tech, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 text-gray-400"
+                  data-cy="hackpack-tech"
+                >
+                  <div
+                    className="text-hackathon-blue-100"
+                    data-cy="hackpack-icon"
+                  >
+                    {TECHSTACKS[tech]}
+                  </div>
+                  {tech}
+                </div>
+              ))}
             </div>
-            {tech}
+            <p className="mt-2">{description}</p>
           </div>
-        ))}
+        </div>
       </div>
-
-      <p className="mt-2">{description}</p>
-    </div>
+    </Link>
   );
 };