refactor: reorganize league page layout into 2/3 and 1/3 column grid
This commit is contained in:
Chris Parsons
parent
7729da9cc8
commit
025ba82cb2
1 changed files with 122 additions and 116 deletions
|
|
@ -183,134 +183,140 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{isUserCommissioner && season && availableTeamCount > 0 && (
|
||||
<Card className="md:col-span-2 lg:col-span-3">
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{/* Left Column - 2/3 width on desktop */}
|
||||
<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>
|
||||
<CardTitle>Invite Link</CardTitle>
|
||||
<CardTitle>Teams</CardTitle>
|
||||
<CardDescription>
|
||||
Share this link to invite people to join your league (
|
||||
{availableTeamCount} spot{availableTeamCount !== 1 ? "s" : ""}{" "}
|
||||
available)
|
||||
{teams.length} team{teams.length !== 1 ? "s" : ""} in this league
|
||||
</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>
|
||||
<CardContent>
|
||||
<div className="space-y-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>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Anyone with this link can join your league
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card className="md:col-span-2 lg:col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle>Teams</CardTitle>
|
||||
<CardDescription>
|
||||
{teams.length} team{teams.length !== 1 ? "s" : ""} in this league
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<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 && (
|
||||
{/* Right Column - 1/3 width on desktop */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>League Info</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Season Status</p>
|
||||
<p className="font-medium capitalize">
|
||||
{season.status.replace("_", " ")}
|
||||
<p className="text-sm text-muted-foreground">Created</p>
|
||||
<p className="font-medium">
|
||||
{new Date(league.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{season && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Season Status</p>
|
||||
<p className="font-medium capitalize">
|
||||
{season.status.replace("_", " ")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Commissioners</CardTitle>
|
||||
<CardDescription>
|
||||
{commissioners.length} commissioner
|
||||
{commissioners.length !== 1 ? "s" : ""}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{commissioners.map((commissioner) => {
|
||||
const commissionerName = commissionerMap[commissioner.userId];
|
||||
return (
|
||||
<div
|
||||
key={commissioner.id}
|
||||
className="py-2 border-b last:border-0"
|
||||
>
|
||||
<p className="font-medium">
|
||||
{commissionerName || "Unknown User"}
|
||||
{commissioner.userId === currentUserId && (
|
||||
<span className="ml-2 text-xs text-primary">(You)</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Commissioners</CardTitle>
|
||||
<CardDescription>
|
||||
{commissioners.length} commissioner
|
||||
{commissioners.length !== 1 ? "s" : ""}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{commissioners.map((commissioner) => {
|
||||
const commissionerName = commissionerMap[commissioner.userId];
|
||||
return (
|
||||
<div
|
||||
key={commissioner.id}
|
||||
className="py-2 border-b last:border-0"
|
||||
>
|
||||
<p className="font-medium">
|
||||
{commissionerName || "Unknown User"}
|
||||
{commissioner.userId === currentUserId && (
|
||||
<span className="ml-2 text-xs text-primary">(You)</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue