Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: filter button #68

Merged
merged 1 commit into from
Jul 27, 2024
Merged

fix: filter button #68

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 103 additions & 92 deletions app/tournaments/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,106 +3,117 @@
import { useState } from "react";
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";

const TournamentPage = () => {
const [isFilterOpen, setIsFilterOpen] = useState(false);
const [filters, setFilters] = useState({
entryFee: "",
mode: "",
status: "",
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: "",
});
};

const handleFilterChange = (e) => {
const { name, value } = e.target;
setFilters(prev => ({ ...prev, [name]: value }));
};
return (
<div className="px-[5%] xl:px-[12%] min-h-[70vh] transition-all">
{/* Tournaments */}
<div className="mt-20 flex flex-col">
{/* title */}
<div className="flex items-center justify-between">
<h1 className="text-4xl font-semibold mb-10 ">Tournaments</h1>

const clearFilters = () => {
setFilters({
entryFee: "",
mode: "",
status: "",
});
};
<div className="relative">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="flex gap-2">
Filter
<ListFilter className="w-4 h-4 mb-0.5" />
</Button>
</DropdownMenuTrigger>

return (
<div className="px-[5%] xl:px-[12%]">
{/* Tournaments */}
<div className="mt-20 flex flex-col">
{/* title */}
<div className="flex items-center justify-between">
<h1 className="text-4xl font-semibold mb-10 ">
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"
onClick={() => setIsFilterOpen(!isFilterOpen)}
>
Filter
<ListFilter className="w-4 h-4 mb-0.5" />
</button>
{isFilterOpen && (
<div className="absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-10">
<div className="p-4">
<div className="mb-4">
<label className="block text-sm font-medium text-gray-300 mb-1">Entry Fee</label>
<select
name="entryFee"
value={filters.entryFee}
onChange={handleFilterChange}
className="w-full bg-gray-700 text-white rounded px-2 py-1"
>
<option value="">All</option>
<option value="free">Free</option>
<option value="paid">Paid</option>
</select>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-300 mb-1">Mode</label>
<select
name="mode"
value={filters.mode}
onChange={handleFilterChange}
className="w-full bg-gray-700 text-white rounded px-2 py-1"
>
<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">
<label className="block text-sm font-medium text-gray-300 mb-1">Status</label>
<select
name="status"
value={filters.status}
onChange={handleFilterChange}
className="w-full bg-gray-700 text-white rounded px-2 py-1"
>
<option value="">All</option>
<option value="open">Open</option>
<option value="live">Live</option>
<option value="completed">Completed</option>
</select>
</div>
<button
onClick={clearFilters}
className="w-full bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700 transition-colors"
>
Clear Filters
</button>
</div>
</div>
)}
</div>
<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 />

{/* tournament cards */}
<TournamentSection filters={filters} />
</div>
<Button
variant="ghost"
onClick={clearFilters}
className="w-full rounded transition-colors"
>
Clear Filters
</Button>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
);

{/* tournament cards */}
<TournamentSection filters={filters} />
</div>
</div>
);
};

export default TournamentPage;
export default TournamentPage;
Loading