feat(prettier): add prettier formatting

This commit is contained in:
Shintaro Jokagi 2025-05-28 13:43:44 +12:00
parent 01f4dac75d
commit 7fafa6bc69
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
85 changed files with 5670 additions and 2788 deletions

View file

@ -1,24 +1,25 @@
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
import { useEffect, useState } from 'preact/hooks'
import { useModsSearch } from '~/hooks/useModsSearch'
import type { ZenTheme } from '~/mods'
import { type Locale, getUI } from '~/utils/i18n'
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' })
const defaultSortIcon = icon({ prefix: "fas", iconName: "sort" })
const ascSortIcon = icon({ prefix: "fas", iconName: "sort-up" })
const descSortIcon = icon({ prefix: "fas", iconName: "sort-down" })
interface ModsListProps {
type ModsListProps = {
allMods: ZenTheme[]
locale: Locale
}
export default function ModsList({ allMods, locale }: ModsListProps) {
const ModsList = ({ allMods, locale }: ModsListProps) => {
const {
search,
createdSort,
@ -43,23 +44,23 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
setPageInput(page.toString())
}, [page])
function getSortIcon(state: 'default' | 'asc' | 'desc') {
if (state === 'asc') return ascSortIcon
if (state === 'desc') return descSortIcon
function getSortIcon(state: "default" | "asc" | "desc") {
if (state === "asc") return ascSortIcon
if (state === "desc") return descSortIcon
return defaultSortIcon
}
function handleSearch(e: Event) {
function handleSearch(e: FormEvent<HTMLInputElement>) {
const target = e.target as HTMLInputElement
setSearch(target.value)
}
function handleLimitChange(e: Event) {
function handleLimitChange(e: FormEvent<HTMLSelectElement>) {
const target = e.target as HTMLSelectElement
setLimit(Number.parseInt(target.value, 10))
}
function handlePageSubmit(e: Event) {
function handlePageSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault()
const newPage = Number.parseInt(pageInput, 10)
if (!Number.isNaN(newPage) && newPage >= 1 && newPage <= totalPages) {
@ -70,7 +71,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
}
}
function handlePageInputChange(e: Event) {
function handlePageInputChange(e: FormEvent<HTMLInputElement>) {
const target = e.target as HTMLInputElement
setPageInput(target.value)
}
@ -89,17 +90,18 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
return (
<div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
<button
className={`px-3 py-2 ${page === 1 ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
className={`px-3 py-2 ${page === 1 ? "pointer-events-none text-gray-400" : "text-dark hover:text-gray-600"}`}
onClick={() => navigatePage(page - 1)}
type="button"
>
&lt;
</button>
<form className="flex items-center gap-2" onSubmit={handlePageSubmit}>
{mods.pagination.pagination.split('{input}').map((value, index) => {
{mods.pagination.pagination.split("{input}").map((value, index) => {
if (index === 0) {
return (
<input
key={index}
aria-label="Page number"
className="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
onInput={handlePageInputChange}
@ -110,13 +112,15 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
}
return (
<span className="text-sm" key={value}>
{value.replace('{totalPages}', totalPages.toString()).replace('{totalItems}', totalItems.toString())}
{value
.replace("{totalPages}", totalPages.toString())
.replace("{totalItems}", totalItems.toString())}
</span>
)
})}
</form>
<button
className={`px-3 py-2 ${page === totalPages ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'}`}
className={`px-3 py-2 ${page === totalPages ? "pointer-events-none text-gray-400" : "text-dark hover:text-gray-600"}`}
onClick={() => navigatePage(page + 1)}
type="button"
>
@ -143,7 +147,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
<div className="grid w-full grid-cols-2 place-items-center gap-4 sm:grid-cols-3">
<div className="flex flex-col items-start gap-2">
<button
className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
className="text-md flex items-center gap-2 px-4 py-2 font-semibold"
onClick={toggleCreatedSort}
type="button"
>
@ -159,7 +163,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
<div className="flex flex-col items-center gap-2">
<button
className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
className="text-md flex items-center gap-2 px-4 py-2 font-semibold"
onClick={toggleUpdatedSort}
type="button"
>
@ -174,7 +178,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
</div>
<div className="flex items-center gap-2 px-4 py-2">
<label className="font-semibold text-md" htmlFor="limit">
<label className="text-md font-semibold" htmlFor="limit">
{mods.sort.perPage}
</label>
<select
@ -194,7 +198,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
<div className="grid w-full grid-cols-1 place-items-start gap-12 py-6 md:grid-cols-2 xl:grid-cols-3">
{paginatedMods.length > 0 ? (
paginatedMods.map((mod) => (
paginatedMods.map(mod => (
<a
className="mod-card flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
href={`/mods/${mod.id}`}
@ -209,17 +213,17 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
/>
</div>
<div>
<h2 className="font-bold text-lg">
{mod.name} <span className="ml-1 font-normal text-sm">by @{mod.author}</span>
<h2 className="text-lg font-bold">
{mod.name} <span className="ml-1 text-sm font-normal">by @{mod.author}</span>
</h2>
<p className="font-thin text-sm">{mod.description}</p>
<p className="text-sm font-thin">{mod.description}</p>
</div>
</a>
))
) : (
<div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
<h2 className="font-bold text-lg">{mods.noResults}</h2>
<p className="font-thin text-sm">{mods.noResultsDescription}</p>
<h2 className="text-lg font-bold">{mods.noResults}</h2>
<p className="text-sm font-thin">{mods.noResultsDescription}</p>
</div>
)}
</div>
@ -228,3 +232,5 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
</div>
)
}
export default ModsList