qwertyasdfgh
/
Makking
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

extracted countys to own component to implement sorting, added sorting by rank descending and ascending, did some accesibilty and styling changes too

This commit is contained in:
Joonas 2023-01-18 23:12:33 +02:00
parent b63fb7e6fc
commit 124f8ad282
2 changed files with 61 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/components/County.jsx Normal file
View File

@ -0,0 +1,51 @@
import { useState } from "react";
export function County({ county }) {
const [sort, setSort] = useState("desc");
return (
<li
className="mx-0 my-4 flex w-full max-w-md flex-shrink-0 flex-col space-y-4 rounded border
border-ctp-surface0 bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg
shadow-ctp-surface0 sm:mx-4"
key={county.id}
>
<h1 className="text-center text-4xl tracking-tighter text-ctp-subtext0">
{county.name}
</h1>
{county?.players.length > 0 ? (
<table className="text-left">
<thead>
<tr className="border-b border-ctp-surface2 text-ctp-subtext1">
<th className="p-2">Player</th>
<th className="p-2">
<button
onClick={() => setSort(sort === "desc" ? "asc" : "desc")}
>
Rank {sort === "desc" ? "↓" : "↑"}
</button>
</th>
</tr>
</thead>
<tbody>
{county.players
.sort((a, b) => {
return sort === "desc" ? a.rank - b.rank : b.rank - a.rank;
})
.map((player) => (
<tr
key={player.id}
className="border-b border-ctp-surface2 odd:bg-ctp-surface0 even:bg-ctp-surface1"
>
<td className="p-2">{player.playerName}</td>
<td className="p-2">#{player.rank}</td>
</tr>
))}
</tbody>
</table>
) : (
<p className="text-center">no players here yet :(</p>
)}
</li>
);
}

47
app/routes/index.jsx
View File

@ -5,6 +5,7 @@ import { prisma } from "~/db.server";
import { Form } from "@remix-run/react";
import { json } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import { County } from "~/components/County";
const countys = [
"Ahvenanmaa",
@ -96,7 +97,7 @@ export default function Index() {
return (
<div className="flex min-h-screen flex-col">
<header
className="flex w-full flex-col items-center justify-between space-y-4 rounded-b-2xl
className="flex w-full flex-col items-center justify-between space-y-4
border-x border-b border-ctp-surface0 bg-gradient-to-r from-ctp-crust to-ctp-mantle px-12 py-4
text-center shadow-lg md:flex-row md:space-y-0"
>
@ -106,7 +107,7 @@ export default function Index() {
<img
className="w-10 rounded-full outline"
src={data.me.avatar_url}
alt=""
alt="me"
/>
<h1>{data.me.username}</h1>
<Link
@ -178,46 +179,18 @@ export default function Index() {
id="layout"
/>
<label
className="flex cursor-pointer items-center justify-center pt-4 peer-checked/layout:text-ctp-green"
for="layout"
className="flex cursor-pointer justify-center pt-6 peer-checked/layout:text-ctp-green"
htmlFor="layout"
>
Don't overflow
</label>
{data.countyData.length > 0 ? (
<ul className="flex flex-grow flex-col overflow-x-auto p-4 peer-checked/layout:flex-wrap peer-checked/layout:items-center peer-checked/layout:justify-center md:flex-row">
<ul
className="flex flex-grow flex-col overflow-x-auto p-4 peer-checked/layout:flex-wrap
peer-checked/layout:justify-center md:flex-row"
>
{data.countyData.map((county) => (
<li
className="mx-0 my-4 flex w-full max-w-md flex-shrink-0 flex-col space-y-4 rounded border border-ctp-surface0
bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg shadow-ctp-surface0 sm:mx-4"
key={county.id}
>
<h1 className="text-center text-4xl tracking-tighter text-ctp-subtext0">
{county.name}
</h1>
{county?.players.length > 0 ? (
<table className="text-left">
<thead>
<tr className="border-b border-ctp-surface2 text-ctp-subtext1">
<th className="p-2">Player</th>
<th className="p-2">Rank</th>
</tr>
</thead>
<tbody>
{county.players.map((player) => (
<tr
key={player.id}
className="border-b border-ctp-surface2 odd:bg-ctp-surface0 even:bg-ctp-surface1"
>
<td className="p-2">{player.playerName}</td>
<td className="p-2">#{player.rank}</td>
</tr>
))}
</tbody>
</table>
) : (
<p className="text-center">no players here yet :(</p>
)}
</li>
<County key={county.id} county={county} />
))}
</ul>
) : (