when you click on card link works

acm-ucr · Sep 16, 2024 · 72cb79d · 72cb79d
1 parent a878d04
commit 72cb79d
Showing 1 changed file with 32 additions and 26 deletions.
diff --git 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>
   );
 };