import Link from "~/renderer/link"; import type { ProjectSchema } from "~/server/db/schema/project"; import type { UserSchema } from "~/server/db/schema/user"; import { Skeleton } from "../ui/skeleton"; type Props = { project: Omit<ProjectSchema, "settings"> & { user: UserSchema; }; }; const ProjectCard = ({ project }: Props) => { return ( <Link key={project.id} href={`/${project.slug}`} className="border border-white/20 hover:border-white/40 rounded-lg transition-colors overflow-hidden" > {project.thumbnail ? ( <img src={`/api/thumbnail/${project.thumbnail}`} className="w-full aspect-[3/2] bg-background object-cover" /> ) : ( <div className="w-full aspect-[3/2] bg-gray-900"></div> )} <div className="py-2 px-3 flex items-center gap-3"> <div className="size-8 rounded-full bg-white/80"></div> <div> <p className="text-md truncate">{project.title}</p> <p className="text-xs truncate">{project.user.name}</p> </div> </div> </Link> ); }; const ProjectCardSkeleton = () => ( <div> <Skeleton className="w-full aspect-[3/2]" /> <div className="py-2 flex items-center gap-3"> <Skeleton className="size-8 rounded-full" /> <div className="flex-1"> <Skeleton className="w-full h-4" /> <Skeleton className="w-full h-4 mt-2" /> </div> </div> </div> ); ProjectCard.Skeleton = ProjectCardSkeleton; export default ProjectCard;