66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { DoorOpen, Users } from 'lucide-react'
|
|
import Link from 'next/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>
|
|
)
|
|
}
|