Merge branch 'main' into deployment

src/app/challenges/page.tsx

@@ -0,0 +1,156 @@
+"use client";
+import { useEffect, useState } from "react";
+import ChallengeCard, { type ChallengeItem } from "~/components/challengeCard";
+import Navbar from "~/components/navbar";
+import Text from "~/components/text";
+
+interface ChallengeData extends ChallengeItem {
+  id: number;
+}
+
+const chall: ChallengeData[] = [
+  {
+    id: 1,
+    title: "Challenge 1",
+    type: "Web",
+    description: "Description 1",
+    points: 100,
+    difficulty: "Easy",
+    solves: 0,
+  },
+  {
+    id: 2,
+    title: "Challenge 2",
+    type: "Web",
+    description: "Description 2",
+    points: 200,
+    difficulty: "Medium",
+    solves: 0,
+  },
+  {
+    id: 3,
+    title: "Challenge 3",
+    type: "Web",
+    description: "Description 3",
+    points: 300,
+    difficulty: "Hard",
+    solves: 0,
+  },
+  {
+    id: 4,
+    title: "Challenge 4",
+    type: "Web",
+    description: "Description 4",
+    points: 400,
+    difficulty: "Insane",
+    solves: 0,
+  },
+  {
+    id: 5,
+    title: "Challenge 5",
+    type: "Web",
+    description: "Description 5",
+    points: 500,
+    difficulty: "Extreme",
+    solves: 0,
+  },
+  {
+    id: 6,
+    title: "Challenge 6",
+    type: "Web",
+    description: "Description 6",
+    points: 600,
+    difficulty: "Impossible",
+    solves: 0,
+  },
+  {
+    id: 7,
+    title: "Challenge 7",
+    type: "Web",
+    description: "Description 7",
+    points: 700,
+    difficulty: "Impossible",
+    solves: 0,
+  },
+  {
+    id: 8,
+    title: "Challenge 8",
+    type: "Web",
+    description: "Description 8",
+    points: 800,
+    difficulty: "Impossible",
+    solves: 0,
+  },
+  {
+    id: 9,
+    title: "Challenge 9",
+    type: "Web",
+    description: "Description 9",
+    points: 900,
+    difficulty: "Impossible",
+    solves: 0,
+  },
+  {
+    id: 10,
+    title: "Challenge 10",
+    type: "Web",
+    description: "Description 10",
+    points: 1000,
+    difficulty: "Impossible",
+    solves: 0,
+  },
+];
+
+export default function ChallengesPage() {
+  const [type, setType] = useState("all");
+  const [challenges, setChallenges] = useState(chall);
+
+  useEffect(() => {
+    // fetch challenges
+    setChallenges(chall);
+  }, []);
+
+  return (
+    <div className="flex flex-col justify-between p-6">
+      <Navbar />
+      <div className="flex flex-col justify-between gap-7 p-6">
+        <div className="flex justify-between">
+          <Text className="text-4xl font-bold" glow="primary">
+            CHALLENGES
+          </Text>
+          {/* a select menu for filtering by type */}
+          <select
+            className="rounded-lg bg-[#2D2D2D80] p-2 text-white"
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="all">All</option>
+            <option value="web">Web</option>
+            <option value="reversing">Reversing</option>
+            <option value="pwn">Pwn</option>
+            <option value="crypto">Crypto</option>
+            <option value="misc">Misc</option>
+          </select>
+        </div>
+        <div className="grid grid-cols-1 gap-7 md:grid-cols-2 xl:grid-cols-4">
+          {challenges
+            .filter((c) => type === "all" ? true : c.type.toLowerCase().includes(type.toLowerCase()))
+            .map((challenge, index) => (
+              <ChallengeCard
+                key={index}
+                title={challenge.title}
+                type={challenge.type}
+                description={challenge.description}
+                points={challenge.points}
+                difficulty={challenge.difficulty}
+                solves={challenge.solves}
+                onClick={() => {
+                  window.location.href = `/challenges/${challenge.id}`;
+                }}
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/leaderboard/page.tsx

@@ -49,12 +49,9 @@ const LeaderboardPage: React.FC = () => {
 
       {/* Leaderboard Table */}
       <div className="w-full overflow-x-auto px-16 py-8">
-        <table className="min-w-full table-auto border-separate border-spacing-y-4">
-          {" "}
-          {/* Add vertical spacing */}
+        <table className="min-w-full border-separate border-spacing-y-2">
           {/* Leaderboard Header */}
-          <LeaderboardHeader className="rounded-t-lg" />
-          {/* Rounded top for header */}
+          <LeaderboardHeader />
           {/* Leaderboard Entries */}
           <tbody>
             {filteredData.length > 0 ? (
@@ -70,8 +67,10 @@ const LeaderboardPage: React.FC = () => {
               ))
             ) : (
               <tr>
-                <td colSpan={4} className="p-4 text-center text-gray-400">
-                  No results found for &quot;{searchQuery}&quot;
+                <td colSpan={4} className="p-4 text-center">
+                  <Text variant="secondary">
+                    No results found for &quot;{searchQuery}&quot;
+                  </Text>
                 </td>
               </tr>
             )}

src/components/IconButton.tsx

@@ -7,7 +7,7 @@ const iconButtonVariants = cva("font-orbitron flex items-center", {
   variants: {
     variant: {
       primary:
-        "text-red-500 [text-shadow:_0_0_10px_#FF0000,0_0_20px_#FF0000,0_0_30px_#FF0000] filter drop-shadow-[0_0_10px_#FF0000]",
+        "text-red-500 [text-shadow:_0_0_10px_#FF0000,0_0_20px_#FF0000,0_0_30px_#FF0000] filter drop-shadow-[0_0_10px_#FF0000] hover:text-white transition-all",
     },
   },
   defaultVariants: {

src/components/challengeCard.tsx

@@ -2,23 +2,28 @@
 import Text from "~/components/text";
 import { BsNut } from "react-icons/bs";
 
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
-// Main Challenge Card Component
-const ChallengeCard: React.FC<{
+export interface ChallengeItem {
   title: string;
   type: string;
   description: string;
   points: number;
   difficulty: string;
   solves: number;
-}> = ({ title, type, description, points, difficulty, solves = 0 }) => {
+}
+
+interface ChallengeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, ChallengeItem {};
+
+// Main Challenge Card Component
+const ChallengeCard: React.FC<ChallengeProps> = ({ title, type, description, points, difficulty, solves = 0, ...other }) => {
   return (
     <div
-      className={`transition-bg mb-5 cursor-pointer rounded-lg bg-[#2D2D2D80] p-6 duration-200 ease-in-out hover:bg-transparent`}
+      {...other}
+      className={`transition-bg mb-5 cursor-pointer rounded-lg bg-[#2D2D2D80] p-6 duration-200 ease-in-out hover:shadow-sm hover:border-2 hover:border-[#ff0000] hover:shadow-[#ff0000]`}
     >
       <div className="flex flex-col">
-        <BsNut size={52} className="rotate-90" />
+        <BsNut size={52} className="text-white rotate-90" />
         <Text
           className="mb-2 mt-4 text-3xl font-bold"
           variant="white"

src/components/leaderboardentry.tsx

@@ -6,7 +6,7 @@ export interface LeaderboardEntryProps
   rank: number;
   name: string;
   score: number;
-  solvedCount: string | number; // Allow string for custom text
+  solvedCount: string | number;
 }
 
 const backgroundColors = {
@@ -30,19 +30,17 @@ const LeaderboardEntry = forwardRef<HTMLTableRowElement, LeaderboardEntryProps>(
         ref={ref}
         {...other}
         className={cn(
-          "rounded-xl font-orbitron text-sm tracking-wider text-white transition-opacity hover:opacity-70",
+          "font-orbitron text-sm tracking-wider text-white transition-opacity hover:opacity-70",
           className,
         )}
         style={{
           backgroundColor: getBackgroundColor(rank),
-          marginBottom: "10px", // Add spacing between rows
-          borderRadius: "8px", // Rounded corners
         }}
       >
-        <td className="px-4 py-3">{rank}</td>
+        <td className="rounded-l-lg px-4 py-3">{rank}</td>
         <td className="truncate px-4 py-3">{name}</td>
         <td className="px-4 py-3 text-center">{score}</td>
-        <td className="px-4 py-3 text-center">{solvedCount}</td>
+        <td className="rounded-r-lg px-4 py-3 text-center">{solvedCount}</td>
       </tr>
     );
   },

src/components/leaderboardheader.tsx

@@ -9,16 +9,18 @@ const LeaderboardHeader = forwardRef<
     <thead
       ref={ref}
       className={cn(
-        "bg-[#1D1D1D] font-orbitron text-sm uppercase tracking-wider text-white",
+        "font-orbitron text-sm uppercase tracking-wider text-white",
         className,
       )}
       {...other}
     >
       <tr className="text-left">
-        <th className="w-1/6 px-4 py-3">POS</th>
-        <th className="w-1/2 px-4 py-3">Team Name</th>
-        <th className="w-1/6 px-4 py-3 text-center">Points</th>
-        <th className="w-1/6 px-4 py-3 text-center">Solved Count</th>
+        <th className="w-1/6 rounded-l-lg bg-[#1D1D1D] px-4 py-3">POS</th>
+        <th className="w-1/2 bg-[#1D1D1D] px-4 py-3">Team Name</th>
+        <th className="w-1/6 bg-[#1D1D1D] px-4 py-3 text-center">Points</th>
+        <th className="w-1/6 rounded-r-lg bg-[#1D1D1D] px-4 py-3 text-center">
+          Solved Count
+        </th>
       </tr>
     </thead>
   );