Move app to apps/web-react in pnpm workspace layout

apps/web-react/app/features/team/components/TeamGoBackButton.tsx

@@ -0,0 +1,29 @@
+import { ChevronLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useMatches } from "react-router";
+import { LinkButton } from "~/components/elements/Button";
+import type { TeamLoaderData } from "~/features/team/loaders/t.$customUrl.server";
+import invariant from "~/utils/invariant";
+import { teamPage } from "~/utils/urls";
+
+export function TeamGoBackButton() {
+	const { t } = useTranslation(["common"]);
+
+	const [, parentRoute] = useMatches();
+	invariant(parentRoute);
+	const layoutData = parentRoute.loaderData as TeamLoaderData;
+
+	return (
+		<div className="stack">
+			<LinkButton
+				to={teamPage(layoutData.team.customUrl)}
+				icon={<ChevronLeft />}
+				variant="outlined"
+				size="small"
+				className="mr-auto"
+			>
+				{t("common:actions.back")}
+			</LinkButton>
+		</div>
+	);
+}

apps/web-react/app/features/team/components/TeamResultsTable.module.css

@@ -0,0 +1,7 @@
+.players {
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	gap: var(--s-3);
+	list-style: none;
+}

apps/web-react/app/features/team/components/TeamResultsTable.tsx

@@ -0,0 +1,108 @@
+import { Users } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { SendouButton } from "~/components/elements/Button";
+import { SendouPopover } from "~/components/elements/Popover";
+import { LocaleTime } from "~/components/LocaleTime";
+import { Placement } from "~/components/Placement";
+import { Table } from "~/components/Table";
+import { TierPill } from "~/components/TierPill";
+import { UserLink } from "~/components/UserLink";
+import type { TeamResultsLoaderData } from "~/features/team/loaders/t.$customUrl.results.server";
+import { tournamentTeamPage } from "~/utils/urls";
+
+import styles from "./TeamResultsTable.module.css";
+
+interface TeamResultsTableProps {
+	results: TeamResultsLoaderData["results"];
+}
+
+export function TeamResultsTable({ results }: TeamResultsTableProps) {
+	const { t } = useTranslation("user");
+
+	return (
+		<Table>
+			<thead>
+				<tr>
+					<th>{t("results.placing")}</th>
+					<th>{t("results.date")}</th>
+					<th>{t("results.tournament")}</th>
+					<th>{t("results.subs")}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{results.map((result) => {
+					return (
+						<tr key={result.tournamentId}>
+							<td className="pl-4 whitespace-nowrap">
+								<div className="stack horizontal xs items-end">
+									<Placement placement={result.placement} />{" "}
+									<div className="text-lighter">
+										/ {result.participantCount}
+									</div>
+								</div>
+							</td>
+							<td className="whitespace-nowrap">
+								<LocaleTime
+									date={result.startsAt}
+									options={{
+										day: "numeric",
+										month: "numeric",
+										year: "numeric",
+									}}
+								/>
+							</td>
+							<td>
+								<div className="stack horizontal xs items-center">
+									{result.logoUrl ? (
+										<img
+											src={result.logoUrl}
+											alt=""
+											width={18}
+											height={18}
+											className="rounded-full"
+										/>
+									) : null}
+									<Link
+										to={tournamentTeamPage({
+											tournamentTeamId: result.tournamentTeamId,
+											tournamentId: result.tournamentId,
+										})}
+									>
+										{result.tournamentName}
+									</Link>
+									{result.tier ? <TierPill tier={result.tier} /> : null}
+								</div>
+							</td>
+							<td>
+								{result.subs.length > 0 ? (
+									<div className="stack horizontal md items-center">
+										<SendouPopover
+											trigger={
+												<SendouButton
+													icon={<Users />}
+													size="small"
+													variant="minimal"
+												>
+													{result.subs.length}
+												</SendouButton>
+											}
+										>
+											<ul className={styles.players}>
+												{result.subs.map((player) => (
+													<li key={player.id} className="flex items-center">
+														<UserLink user={player} />
+													</li>
+												))}
+											</ul>
+										</SendouPopover>
+									</div>
+								) : null}
+							</td>
+						</tr>
+					);
+				})}
+			</tbody>
+		</Table>
+	);
+}