import { icon, library } from "@fortawesome/fontawesome-svg-core" import { faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons" import { useEffect, useState, type FormEvent } from "react" import { useModsSearch } from "~/hooks/useModsSearch" import { type ZenTheme } from "~/mods" import { getUI, type Locale } from "~/utils/i18n" // Add icons to the library library.add(faSort, faSortUp, faSortDown) // Create icon objects const defaultSortIcon = icon({ prefix: "fas", iconName: "sort" }) const ascSortIcon = icon({ prefix: "fas", iconName: "sort-up" }) const descSortIcon = icon({ prefix: "fas", iconName: "sort-down" }) type ModsListProps = { allMods: ZenTheme[] locale: Locale } const ModsList = ({ allMods, locale }: ModsListProps) => { const { search, createdSort, updatedSort, page, limit, totalPages, totalItems, setSearch, toggleCreatedSort, toggleUpdatedSort, setPage, setLimit, mods: paginatedMods, // searchParams, } = useModsSearch(allMods) const [pageInput, setPageInput] = useState(page.toString()) // Keep page input in sync with actual page useEffect(() => { setPageInput(page.toString()) }, [page]) function getSortIcon(state: "default" | "asc" | "desc") { if (state === "asc") return ascSortIcon if (state === "desc") return descSortIcon return defaultSortIcon } function handleSearch(e: FormEvent) { const target = e.target as HTMLInputElement setSearch(target.value) } function handleLimitChange(e: FormEvent) { const target = e.target as HTMLSelectElement setLimit(Number.parseInt(target.value, 10)) } function handlePageSubmit(e: FormEvent) { e.preventDefault() const newPage = Number.parseInt(pageInput, 10) if (!Number.isNaN(newPage) && newPage >= 1 && newPage <= totalPages) { setPage(newPage) window.scrollTo(0, 0) } else { setPageInput(page.toString()) } } function handlePageInputChange(e: FormEvent) { const target = e.target as HTMLInputElement setPageInput(target.value) } function navigatePage(pageNum: number) { setPage(pageNum) window.scrollTo(0, 0) } const { routes: { mods }, } = getUI(locale) function renderPagination() { if (totalPages <= 1) return null return (
{mods.pagination.pagination.split("{input}").map((value, index) => { if (index === 0) { return ( ) } return ( {value .replace("{totalPages}", totalPages.toString()) .replace("{totalItems}", totalItems.toString())} ) })}
) } return (
{paginatedMods.length > 0 ? ( paginatedMods.map(mod => (
{mod.name}

{mod.name} by @{mod.author}

{mod.description}

)) ) : (

{mods.noResults}

{mods.noResultsDescription}

)}
{renderPagination()}
) } export default ModsList