Wrap next/link in a shared Link component that ships prefetch=false by default, so no route is ever prefetched (viewport or hover) anymore, and drop the DNS prefetch hint. Removes hidden background requests that were the source of intermittent issues.
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import { DoorOpen, Users } from "lucide-react";
|
|
import Link from "@/components/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface UserRoom {
|
|
id: number;
|
|
name: string;
|
|
state: string;
|
|
users: number;
|
|
usersMax: number;
|
|
}
|
|
|
|
interface UserRoomsProps {
|
|
rooms: UserRoom[];
|
|
}
|
|
|
|
const stateColors: Record<
|
|
string,
|
|
"default" | "secondary" | "outline" | "destructive"
|
|
> = {
|
|
open: "default",
|
|
locked: "secondary",
|
|
password: "destructive",
|
|
invisible: "outline",
|
|
};
|
|
|
|
export function UserRooms({ rooms }: UserRoomsProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<DoorOpen className="h-4 w-4" />
|
|
Rooms ({rooms.length})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{rooms.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
This user doesn't own any rooms.
|
|
</p>
|
|
) : (
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{rooms.map((room) => (
|
|
<Link
|
|
key={room.id}
|
|
href={`/admin/rooms/${room.id}`}
|
|
className="flex items-center gap-3 rounded-lg border px-3 py-2.5 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{room.name}</p>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<Badge
|
|
variant={stateColors[room.state] || "outline"}
|
|
className="text-[10px]"
|
|
>
|
|
{room.state}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
|
<Users className="h-3 w-3" />
|
|
{room.users}/{room.usersMax}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-xs font-mono text-muted-foreground">
|
|
#{room.id}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|