Roster tab work

app/components/match-page/MatchBanner.tsx

@@ -70,7 +70,6 @@ function ScreenNotice({ screenLegal }: Pick<MatchBannerProps, "screenLegal">) {
 						height={imgSize}
 						alt=""
 					/>
-					{t("weapons:SPECIAL_19")}
 				</SendouButton>
 			}
 		>

app/components/match-page/MatchTabs.module.css

@@ -10,6 +10,64 @@
 	}
 }
 
+.rosters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--s-8);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
+	flex-direction: column;
+}
+
+@container (width >= 640px) {
+	.rosters {
+		justify-content: space-evenly;
+		flex-direction: row;
+	}
+}
+
+.rostersSpacedHeader {
+	min-height: 45px;
+	display: flex;
+	align-items: center;
+}
+
+.rosterMembers {
+	position: relative;
+	padding-left: 34px;
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	margin-top: var(--s-1-5);
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: 21px;
+		top: -8px;
+		bottom: 0;
+		width: 3px;
+		background-color: var(--color-border-high);
+		opacity: 0.3;
+		border-radius: 0 0 var(--radius-field) var(--radius-field);
+	}
+}
+
+.teamOneDot {
+	border-radius: 100%;
+	background-color: var(--color-accent);
+	width: 8px;
+	height: 8px;
+}
+
+.teamTwoDot {
+	border-radius: 100%;
+	background-color: var(--color-second);
+	width: 8px;
+	height: 8px;
+}
+
 .joinContent {
 	display: flex;
 	gap: var(--s-4);

app/components/match-page/MatchTabs.tsx

@@ -2,10 +2,12 @@ import { DoorOpen, Tally5, Users } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import type * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router";
+import { Link, useSearchParams } from "react-router";
 import { Alert } from "~/components/Alert";
+import { Avatar } from "~/components/Avatar";
 import invariant from "~/utils/invariant";
 import type { CommonUser } from "~/utils/kysely.server";
+import { userPage } from "~/utils/urls";
 import {
 	SendouTab,
 	SendouTabList,
@@ -71,8 +73,75 @@ export function MatchTabs({ children, tabs }: MatchTabsProps) {
 
 // xxx: extract tabs to different components
 
-export function MatchRosterTab() {
-	return <SendouTabPanel id={TAB_KEYS.ROSTERS}>Roster content</SendouTabPanel>;
+interface RosterTabTeam {
+	team?: {
+		name: string;
+		url: string;
+		avatar?: string;
+	};
+	members: Array<CommonUser>;
+}
+
+interface MatchRosterTabProps {
+	teams: [RosterTabTeam, RosterTabTeam];
+}
+
+export function MatchRosterTab({ teams }: MatchRosterTabProps) {
+	return (
+		<SendouTabPanel id={TAB_KEYS.ROSTERS}>
+			<div className={styles.rosters}>
+				<TeamRoster team={teams[0]} side="alpha" />
+				<TeamRoster team={teams[1]} side="bravo" />
+			</div>
+		</SendouTabPanel>
+	);
+}
+
+function TeamRoster({
+	team,
+	side,
+}: {
+	team: RosterTabTeam;
+	side: "alpha" | "bravo";
+}) {
+	const dotClassName = side === "alpha" ? styles.teamOneDot : styles.teamTwoDot;
+	const label = side === "alpha" ? "Alpha" : "Bravo";
+
+	return (
+		<div className="stack xxs">
+			{team.team ? (
+				<Link to={team.team.url} className="stack horizontal sm">
+					<Avatar
+						url={team.team.avatar}
+						identiconInput={team.team.name}
+						size="sm"
+					/>
+					<div className="stack justify-center line-height-tight">
+						<h2 className="text-main-forced font-bold">{team.team.name}</h2>
+						<div className="stack xs horizontal items-center text-lighter">
+							<div className={dotClassName} />
+							{label}
+						</div>
+					</div>
+				</Link>
+			) : null}
+			{team.members.length > 0 ? (
+				<ul className={styles.rosterMembers}>
+					{team.members.map((member) => (
+						<li key={member.id}>
+							<Link
+								to={userPage(member)}
+								className="stack horizontal sm items-center"
+							>
+								<Avatar user={member} size="xxs" />
+								<span>{member.username}</span>
+							</Link>
+						</li>
+					))}
+				</ul>
+			) : null}
+		</div>
+	);
 }
 
 export function MatchActionTab() {

app/features/match-page-test/routes/match-page-test.tsx

@@ -138,7 +138,76 @@ export default function MatchPageTestRoute() {
 						pass="8430"
 						showNoSplatnetAlert
 					/>
-					<MatchRosterTab />
+					<MatchRosterTab
+						teams={[
+							{
+								team: { name: "me in japan", url: "/t/me-in-japan" },
+								members: [
+									{
+										id: 1,
+										username: "Sendou",
+										discordId: "123",
+										discordAvatar: null,
+										customUrl: "sendou",
+									},
+									{
+										id: 2,
+										username: "Lean",
+										discordId: "456",
+										discordAvatar: null,
+										customUrl: null,
+									},
+									{
+										id: 3,
+										username: "Kiver",
+										discordId: "789",
+										discordAvatar: null,
+										customUrl: null,
+									},
+									{
+										id: 4,
+										username: "Brian",
+										discordId: "012",
+										discordAvatar: null,
+										customUrl: null,
+									},
+								],
+							},
+							{
+								team: { name: "Question Mark", url: "/t/question-mark" },
+								members: [
+									{
+										id: 5,
+										username: "Naga",
+										discordId: "345",
+										discordAvatar: null,
+										customUrl: null,
+									},
+									{
+										id: 6,
+										username: "Grey",
+										discordId: "678",
+										discordAvatar: null,
+										customUrl: null,
+									},
+									{
+										id: 7,
+										username: "Zack",
+										discordId: "901",
+										discordAvatar: null,
+										customUrl: null,
+									},
+									{
+										id: 8,
+										username: "Lime",
+										discordId: "234",
+										discordAvatar: null,
+										customUrl: null,
+									},
+								],
+							},
+						]}
+					/>
 					<MatchActionTab />
 				</MatchTabs>
 			</MatchPage>

app/styles/utils.css

@@ -367,6 +367,10 @@
 		margin: 0 auto;
 	}
 
+	.line-height-tight {
+		line-height: 1.3;
+	}
+
 	.hidden {
 		display: none;
 	}