37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import type { Lobby } from "@/server/db/schema";
|
|
import {
|
|
Card,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
import { formatDate } from "@/lib/utils";
|
|
import { ArrowRight, ChevronRight } from "lucide-react";
|
|
import { appRoutes } from "@/config/app.routes";
|
|
|
|
function LobbyCard({ lobby }: { lobby: Lobby }) {
|
|
return (
|
|
<Link href={appRoutes.lobby(lobby.id)}>
|
|
<Card className="group border-none bg-transparent p-0 shadow-none">
|
|
<div className="container-bg py-4">
|
|
<CardHeader className="flex w-full items-center justify-between">
|
|
<div className="">
|
|
<CardTitle className="text-lg">{lobby.name}</CardTitle>
|
|
<CardDescription className="text-xs">
|
|
{formatDate(lobby.createdAt)}
|
|
</CardDescription>
|
|
</div>
|
|
<div className="">
|
|
<ChevronRight className="text-border/20 size-12 transition-colors duration-150 group-hover:text-white" />
|
|
</div>
|
|
</CardHeader>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default LobbyCard;
|