feat(biome): add class sorting

This commit is contained in:
Shintaro Jokagi 2025-05-15 14:23:23 +12:00
parent 017cb2a7f5
commit 2da95610ab
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
2 changed files with 12 additions and 9 deletions

View file

@ -6,7 +6,10 @@
"linter": { "linter": {
"enabled": true, "enabled": true,
"rules": { "rules": {
"recommended": true "recommended": true,
"nursery": {
"useSortedClasses": "info"
}
} }
}, },
"formatter": { "formatter": {

View file

@ -153,7 +153,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
<button <button
type="button" type="button"
onClick={toggleCreatedSort} onClick={toggleCreatedSort}
className="text-md flex items-center gap-2 px-4 py-2 font-semibold" className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
> >
{mods.sort.lastCreated} {mods.sort.lastCreated}
<span <span
@ -169,7 +169,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
<button <button
type="button" type="button"
onClick={toggleUpdatedSort} onClick={toggleUpdatedSort}
className="text-md flex items-center gap-2 px-4 py-2 font-semibold" className="flex items-center gap-2 px-4 py-2 font-semibold text-md"
> >
{mods.sort.lastUpdated} {mods.sort.lastUpdated}
<span <span
@ -182,7 +182,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
</div> </div>
<div className="flex items-center gap-2 px-4 py-2"> <div className="flex items-center gap-2 px-4 py-2">
<label htmlFor="limit" className="text-md font-semibold"> <label htmlFor="limit" className="font-semibold text-md">
{mods.sort.perPage} {mods.sort.perPage}
</label> </label>
<select <select
@ -217,17 +217,17 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
/> />
</div> </div>
<div> <div>
<h2 className="text-lg font-bold"> <h2 className="font-bold text-lg">
{mod.name} <span className="ml-1 text-sm font-normal">by @{mod.author}</span> {mod.name} <span className="ml-1 font-normal text-sm">by @{mod.author}</span>
</h2> </h2>
<p className="text-sm font-thin">{mod.description}</p> <p className="font-thin text-sm">{mod.description}</p>
</div> </div>
</a> </a>
)) ))
) : ( ) : (
<div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center"> <div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
<h2 className="text-lg font-bold">{mods.noResults}</h2> <h2 className="font-bold text-lg">{mods.noResults}</h2>
<p className="text-sm font-thin">{mods.noResultsDescription}</p> <p className="font-thin text-sm">{mods.noResultsDescription}</p>
</div> </div>
)} )}
</div> </div>