style: games/id page

improved styling of the games/id page
dinxsh · Jul 28, 2024 · b5a0705 · b5a0705
1 parent 5779e99
commit b5a0705
Showing 1 changed file with 99 additions and 12 deletions.
diff --git a/app/games/[id]/page.js b/app/games/[id]/page.js
@@ -6,6 +6,13 @@ import { useState } from "react";
 import { HeartFilledIcon, HeartIcon } from "@radix-ui/react-icons";
 import TournamentSection from "../../../components/TournamentSection";
 import { ListFilter } from "lucide-react";
+import { Button } from "../../../@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
 
 export default function GamePage({ params }) {
   const [isFavourite, setIsFavourite] = useState(false);
@@ -18,6 +25,25 @@ export default function GamePage({ params }) {
     setIsFavourite(!isFavourite);
   };
 
+  const [filters, setFilters] = useState({
+    entryFee: "",
+    mode: "",
+    status: "",
+  });
+
+  const handleFilterChange = (e) => {
+    const { name, value } = e.target;
+    setFilters((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      entryFee: "",
+      mode: "",
+      status: "",
+    });
+  };
+
   return (
     <div className="mt-20 px-[5%] md:px-[7%] xl:px-[12%]">
       {/* Banner */}
@@ -34,21 +60,21 @@ export default function GamePage({ params }) {
 
       {/* Title */}
       <div className="mt-10">
-        <div className="flex justify-between">
+        <div className="flex justify-between items-center">
           <h1 className="text-3xl md:text-4xl font-semibold transition-all">
             {game.name}
           </h1>
-          <button
-            className="flex items-center gap-2 px-4 py-1 md:px-6 md:py-2 text-white text-sm md:text-lg font-medium bg-sky-600 hover:bg-sky-700 rounded-md transition-all"
+          <Button
+            className="flex items-center gap-2 px-2 py-1 md:px-4 md:py-2 font-medium text- text-white bg-indigo-500 hover:bg-indigo-600 rounded-md active:scale-90 transition-all"
             onClick={handleClick}
           >
             Favourite
             {isFavourite ? (
-              <HeartFilledIcon className="md:w-5 md:h-5 transition-all" />
+              <HeartFilledIcon className="md:w-4 md:h-4 transition-all" />
             ) : (
-              <HeartIcon className="md:w-5 md:h-5 transition-all" />
+              <HeartIcon className="md:w-4 md:h-4 transition-all" />
             )}
-          </button>
+          </Button>
         </div>
 
         {/* Desc */}
@@ -60,16 +86,77 @@ export default function GamePage({ params }) {
       {/* Tournaments */}
       <div className="mt-20 flex flex-col">
         {/* title */}
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between mb-10">
           <h1 className="text-xl md:text-2xl font-semibold uppercase transition-all">
             Tournaments
           </h1>
           <div className="relative">
-            <button className="px-3 py-1 md:px-4 md:py-2 flex items-center gap-2 rounded-lg border border-gray-500 hover:bg-gray-800 transition-all">
-              Filter
-              <ListFilter className="w-4 h-4 mb-0.5" />
-            </button>
-            {/* Filter dropdown logic */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="flex gap-2">
+                  Filter
+                  <ListFilter className="w-4 h-4 mb-0.5" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-56">
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">
+                    Entry Fee
+                  </label>
+                  <select
+                    name="entryFee"
+                    value={filters.entryFee}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="free">Free</option>
+                    <option value="paid">Paid</option>
+                  </select>
+                </div>
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">Mode</label>
+                  <select
+                    name="mode"
+                    value={filters.mode}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="solo">Solo</option>
+                    <option value="duo">Duo</option>
+                    <option value="squad">Squad</option>
+                  </select>
+                </div>
+                <div className="mb-4 p-2">
+                  <label className="block text-sm font-medium mb-2">
+                    Status
+                  </label>
+                  <select
+                    name="status"
+                    value={filters.status}
+                    onChange={handleFilterChange}
+                    className="w-full rounded px-2 py-1 bg-background border"
+                  >
+                    <option value="">All</option>
+                    <option value="open">Open</option>
+                    <option value="live">Live</option>
+                    <option value="completed">Completed</option>
+                  </select>
+                </div>
+
+                <DropdownMenuSeparator />
+
+                <Button
+                  variant="ghost"
+                  onClick={clearFilters}
+                  className="w-full rounded transition-colors"
+                >
+                  Clear Filters
+                </Button>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>