fix: this vstack stuff doesn't work idk what it did

This commit is contained in:
zkldi
2024-05-28 21:30:15 +01:00
parent 489e017d77
commit ff10131b4d
3 changed files with 63 additions and 59 deletions
@@ -18,7 +18,7 @@ export default function SelectableCompareType({
gptConfig: GamePTConfig;
} & ZTableTHProps) {
return (
<th className="vstack gap-1 align-items-center justify-content-center">
<th className="gap-1 align-items-center justify-content-center">
<select
onChange={(v) => setMetric(v.target.value)}
value={metric}
@@ -36,33 +36,35 @@ export default function SelectableRanking({
}
return (
<th className="vstack gap-1 align-items-center justify-content-center">
<select
onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
value={rankingViewMode}
className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
>
<option value="global">Global Ranking</option>
<option value="rival">Rival Ranking</option>
</select>
<div onClick={() => changeSort("Site Ranking")}>
<div className="d-flex justify-content-center gap-1">
<Icon
type="arrow-up"
className={
currentSortMode === "Rating" && reverseSort
? "opacity-100"
: "opacity-25"
}
/>
<Icon
type="arrow-down"
className={
currentSortMode === "Rating" && !reverseSort
? "opacity-100"
: "opacity-25"
}
/>
<th>
<div className="vstack gap-1 align-items-center justify-content-center">
<select
onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
value={rankingViewMode}
className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
>
<option value="global">Global Ranking</option>
<option value="rival">Rival Ranking</option>
</select>
<div onClick={() => changeSort("Site Ranking")}>
<div className="d-flex justify-content-center gap-1">
<Icon
type="arrow-up"
className={
currentSortMode === "Rating" && reverseSort
? "opacity-100"
: "opacity-25"
}
/>
<Icon
type="arrow-down"
className={
currentSortMode === "Rating" && !reverseSort
? "opacity-100"
: "opacity-25"
}
/>
</div>
</div>
</div>
</th>
@@ -36,37 +36,39 @@ export default function SelectableRating<GPT extends GPTString>({
}
return (
<th className="vstack gap-1 align-items-center justify-content-center">
<select
onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
value={rating}
className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
>
{Object.keys(gptConfig[key]).map((s) => (
<option key={s} value={s}>
{UppercaseFirst(s)}
</option>
))}
</select>
<div onClick={() => changeSort("Rating")}>
<span className="d-flex justify-content-center gap-1">
<Icon
type="arrow-up"
className={
currentSortMode === "Rating" && reverseSort
? "opacity-100"
: "opacity-25"
}
/>
<Icon
type="arrow-down"
className={
currentSortMode === "Rating" && !reverseSort
? "opacity-100"
: "opacity-25"
}
/>
</span>
<th>
<div className="vstack gap-1 align-items-center justify-content-center">
<select
onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
value={rating}
className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
>
{Object.keys(gptConfig[key]).map((s) => (
<option key={s} value={s}>
{UppercaseFirst(s)}
</option>
))}
</select>
<div onClick={() => changeSort("Rating")}>
<span className="d-flex justify-content-center gap-1">
<Icon
type="arrow-up"
className={
currentSortMode === "Rating" && reverseSort
? "opacity-100"
: "opacity-25"
}
/>
<Icon
type="arrow-down"
className={
currentSortMode === "Rating" && !reverseSort
? "opacity-100"
: "opacity-25"
}
/>
</span>
</div>
</div>
</th>
);