Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-04-22 15:07:20 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add icons to sort dropdown in DiscoverBrowser

Browse Source
This commit is contained in:
Jared Schoeny 2025-12-19 00:03:33 -10:00
parent b360b5f62f
commit 42a5928e41
1 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Discover/DiscoverBrowser.tsx
View File

@ -6,7 +6,14 @@ import { baseRoms } from "@/data/baseRoms";
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
import { useFloating, offset, flip, shift, size, autoUpdate } from "@floating-ui/react";
import { IconType } from "react-icons";
import { MdTune } from "react-icons/md";
import {
MdTune,
MdWhatshot,
MdTrendingUp,
MdNewReleases,
MdUpdate,
MdSortByAlpha,
} from "react-icons/md";
import { BsSdCardFill } from "react-icons/bs";
import { CATEGORY_ICONS } from "@/components/Icons/tagCategories";
import { useBaseRoms } from "@/contexts/BaseRomContext";
@ -15,6 +22,14 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { getDiscoverData } from "@/app/discover/actions";
import type { DiscoverSortOption } from "@/types/discover";
const SORT_ICON_MAP: Record<DiscoverSortOption, IconType> = {
trending: MdWhatshot,
popular: MdTrendingUp,
new: MdNewReleases,
updated: MdUpdate,
alphabetical: MdSortByAlpha,
};
const HACKS_PER_PAGE = 9;
interface DiscoverBrowserProps {
@ -170,6 +185,11 @@ export default function DiscoverBrowser({ initialSort = "trending" }: DiscoverBr
setSelectedBaseRoms([]);
}
const sortIcon = React.useMemo(() => {
const SortIcon = SORT_ICON_MAP[sort];
return SortIcon ? <SortIcon className="h-5 w-5 text-foreground/80" aria-hidden="true" /> : null;
}, [sort]);
return (
<div className="max-w-[1200px] mx-auto">
<div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center">
@ -181,26 +201,31 @@ export default function DiscoverBrowser({ initialSort = "trending" }: DiscoverBr
className="h-11 w-full rounded-md bg-[var(--surface-2)] px-3 text-sm text-foreground placeholder:text-foreground/60 ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
/>
</div>
<select
value={sort}
onChange={(e) => {
const nextSort = e.target.value as DiscoverSortOption;
setSort(nextSort);
// Keep URL query param in sync so refresh/back preserves sort
const current = searchParams ? new URLSearchParams(searchParams.toString()) : new URLSearchParams();
current.set("sort", nextSort);
const queryString = current.toString();
const url = queryString ? `${pathname}?${queryString}` : pathname;
router.replace(url);
}}
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
<div
className="inline-flex h-11 items-center gap-1.5 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus-within:ring-2 focus-within:ring-[var(--ring)]"
>
<option value="trending">Trending</option>
<option value="popular">Most popular</option>
<option value="new">Newest</option>
<option value="updated">Recently updated</option>
<option value="alphabetical">Alphabetical</option>
</select>
{sortIcon}
<select
value={sort}
onChange={(e) => {
const nextSort = e.target.value as DiscoverSortOption;
setSort(nextSort);
// Keep URL query param in sync so refresh/back preserves sort
const current = searchParams ? new URLSearchParams(searchParams.toString()) : new URLSearchParams();
current.set("sort", nextSort);
const queryString = current.toString();
const url = queryString ? `${pathname}?${queryString}` : pathname;
router.replace(url);
}}
className="h-full bg-transparent pl-1 pr-0 text-sm text-foreground focus:outline-none focus:ring-0"
>
<option value="trending">Trending</option>
<option value="popular">Most popular</option>
<option value="new">Newest</option>
<option value="updated">Recently updated</option>
<option value="alphabetical">Alphabetical</option>
</select>
</div>
</div>
{/* Unified filter section: Base ROM dropdown first, category dropdowns next, ungrouped tags last */}