Project Card

1// Project tile → links to /project/:slug. Styled with base44 design tokens (shadcn Tailwind classes)
2// — re-skin via the app's design tokens (src/index.css :root/.dark), not this JSX. The cover is a
3// one-of: image when present, else the video's poster / first resolution. The `//`-protocol fix and
4// these field paths are load-bearing.
5import { Link } from "react-router-dom";
6
7function https(url) {
8  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
9}
10
11// coverImage.imageInfo is ONE-OF with coverVideo.videoInfo — fall back through the video.
12function coverUrl(project) {
13  const image = project?.coverImage?.imageInfo?.url;
14  if (image) return https(image);
15  const vi = project?.coverVideo?.videoInfo;
16  return https(vi?.posters?.[0]?.url || vi?.resolutions?.[0]?.url || null);
17}
18
19export default function ProjectCard({ project }) {
20  const image = coverUrl(project);
21
22  return (
23    <Link to={`/project/${project.slug}`}
24      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
25      <div className="aspect-[4/3] bg-background">
26        {image
27          ? <img src={image} alt={project.title} loading="lazy"
28              className="w-full h-full object-cover" />
29          : <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true"><svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx=
30      </div>
31      <div className="p-3 flex flex-col gap-1">
32        <h3 className="m-0 font-display text-[15px] font-semibold">{project.title}</h3>
33        {project.description && (
34          <p className="m-0 text-muted-foreground text-sm leading-normal">{project.description}</p>
35        )}
36      </div>
37    </Link>
38  );
39}