chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: reorganize league page layout into 2/3 and 1/3 column grid

Browse source
This commit is contained in:
Chris Parsons 2025-10-14 21:54:46 -07:00
parent 7729da9cc8
commit 025ba82cb2
1 changed files with 122 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

238
app/routes/leagues/$leagueId.tsx
View file

@ -183,134 +183,140 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
)} )}
</div> </div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
{isUserCommissioner && season && availableTeamCount > 0 && ( {/* Left Column - 2/3 width on desktop */}
<Card className="md:col-span-2 lg:col-span-3"> <div className="md:col-span-2 space-y-6">
{isUserCommissioner && season && availableTeamCount > 0 && (
<Card>
<CardHeader>
<CardTitle>Invite Link</CardTitle>
<CardDescription>
Share this link to invite people to join your league (
{availableTeamCount} spot{availableTeamCount !== 1 ? "s" : ""}{" "}
available)
</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center gap-2">
<input
type="text"
readOnly
value={`${typeof window !== "undefined" ? window.location.origin : ""}/i/${season.inviteCode}`}
className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted"
onClick={(e) => e.currentTarget.select()}
/>
<Button
onClick={handleCopyInviteLink}
variant={copied ? "default" : "outline"}
size="sm"
>
{copied ? "Copied!" : "Copy"}
</Button>
</div>
<p className="text-xs text-muted-foreground">
Anyone with this link can join your league
</p>
</CardContent>
</Card>
)}
<Card>
<CardHeader> <CardHeader>
<CardTitle>Invite Link</CardTitle> <CardTitle>Teams</CardTitle>
<CardDescription> <CardDescription>
Share this link to invite people to join your league ( {teams.length} team{teams.length !== 1 ? "s" : ""} in this league
{availableTeamCount} spot{availableTeamCount !== 1 ? "s" : ""}{" "}
available)
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent>
<div className="flex items-center gap-2"> <div className="space-y-3">
<input {teams.map((team) => {
type="text" const isOwned = team.ownerId === currentUserId;
readOnly const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
value={`${typeof window !== "undefined" ? window.location.origin : ""}/i/${season.inviteCode}`} return (
className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted" <Card
onClick={(e) => e.currentTarget.select()} key={team.id}
/> className={isOwned ? "border-primary" : ""}
<Button >
onClick={handleCopyInviteLink} <CardHeader>
variant={copied ? "default" : "outline"} <CardTitle className="text-lg">{team.name}</CardTitle>
size="sm" <CardDescription>
> {team.ownerId ? (
{copied ? "Copied!" : "Copy"} isOwned ? (
</Button> <span className="text-primary font-medium">
Your Team
</span>
) : (
<span>{ownerName || "Unknown Owner"}</span>
)
) : (
<span className="text-muted-foreground">
Available
</span>
)}
</CardDescription>
</CardHeader>
</Card>
);
})}
</div> </div>
<p className="text-xs text-muted-foreground">
Anyone with this link can join your league
</p>
</CardContent> </CardContent>
</Card> </Card>
)} </div>
<Card className="md:col-span-2 lg:col-span-3"> {/* Right Column - 1/3 width on desktop */}
<CardHeader> <div className="space-y-6">
<CardTitle>Teams</CardTitle> <Card>
<CardDescription> <CardHeader>
{teams.length} team{teams.length !== 1 ? "s" : ""} in this league <CardTitle>League Info</CardTitle>
</CardDescription> </CardHeader>
</CardHeader> <CardContent className="space-y-2">
<CardContent>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{teams.map((team) => {
const isOwned = team.ownerId === currentUserId;
const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
return (
<Card
key={team.id}
className={isOwned ? "border-primary" : ""}
>
<CardHeader>
<CardTitle className="text-lg">{team.name}</CardTitle>
<CardDescription>
{team.ownerId ? (
isOwned ? (
<span className="text-primary font-medium">
Your Team
</span>
) : (
<span>{ownerName || "Unknown Owner"}</span>
)
) : (
<span className="text-muted-foreground">
Available
</span>
)}
</CardDescription>
</CardHeader>
</Card>
);
})}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>League Info</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<div>
<p className="text-sm text-muted-foreground">Created</p>
<p className="font-medium">
{new Date(league.createdAt).toLocaleDateString()}
</p>
</div>
{season && (
<div> <div>
<p className="text-sm text-muted-foreground">Season Status</p> <p className="text-sm text-muted-foreground">Created</p>
<p className="font-medium capitalize"> <p className="font-medium">
{season.status.replace("_", " ")} {new Date(league.createdAt).toLocaleDateString()}
</p> </p>
</div> </div>
)} {season && (
</CardContent> <div>
</Card> <p className="text-sm text-muted-foreground">Season Status</p>
<p className="font-medium capitalize">
{season.status.replace("_", " ")}
</p>
</div>
)}
</CardContent>
</Card>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Commissioners</CardTitle> <CardTitle>Commissioners</CardTitle>
<CardDescription> <CardDescription>
{commissioners.length} commissioner {commissioners.length} commissioner
{commissioners.length !== 1 ? "s" : ""} {commissioners.length !== 1 ? "s" : ""}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <div className="space-y-2">
{commissioners.map((commissioner) => { {commissioners.map((commissioner) => {
const commissionerName = commissionerMap[commissioner.userId]; const commissionerName = commissionerMap[commissioner.userId];
return ( return (
<div <div
key={commissioner.id} key={commissioner.id}
className="py-2 border-b last:border-0" className="py-2 border-b last:border-0"
> >
<p className="font-medium"> <p className="font-medium">
{commissionerName || "Unknown User"} {commissionerName || "Unknown User"}
{commissioner.userId === currentUserId && ( {commissioner.userId === currentUserId && (
<span className="ml-2 text-xs text-primary">(You)</span> <span className="ml-2 text-xs text-primary">(You)</span>
)} )}
</p> </p>
</div> </div>
); );
})} })}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
</div> </div>
); );