all projects added

src/components/ProjectListItem.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+import type { ProjectMetadata } from "@/projects";
+import { Link } from "react-router-dom";
+
+export function ProjectListItem({
+	metadata,
+	isDevMode = false,
+}: {
+	metadata: ProjectMetadata;
+	isDevMode?: boolean;
+}) {
+	const tags = metadata.tags ? [...metadata.tags].sort() : [];
+	if (metadata.hidden && !isDevMode) return null;
+
+	return (
+		<Link
+			to={`/projects/${metadata.slug}`}
+			className={cn(
+				"group block flex flex-col justify-between rounded-md transition-colors duration-200 border-2 hover:border-accent",
+				isDevMode && metadata.hidden
+					? "border-dashed border-accent"
+					: "border-gutter-dim",
+			)}
+			data-tags={tags.join(",")}
+		>
+			<div className="flex gap-4 p-4 pb-0">
+				<div className="w-16 h-16 flex-shrink-0">
+					{metadata.image ? (
+						<img
+							src={metadata.image}
+							alt={`${metadata.title} icon`}
+							className="w-full h-full object-cover rounded"
+						/>
+					) : (
+						<div className="w-full h-full border border-gutter rounded" />
+					)}
+				</div>
+				<div className="flex flex-col gap-2">
+					<h3 className="text-lg font-500 -mb-2 -mt-1 text-accent text-balance">
+						{metadata.title}
+					</h3>
+					<p className="text-sm text-fg text-pretty">{metadata.description}</p>
+					{tags.length > 0 ? (
+						<div className="flex gap-1.5 text-xs flex-wrap leading-3 items-center mb-1 no-select">
+							{tags.map((tag) => (
+								<span
+									key={tag}
+									className="flex items-center text-fg font-500 rounded-md border border-gutter px-1.5 py-0.5"
+								>
+									{tag}
+								</span>
+							))}
+						</div>
+					) : null}
+				</div>
+			</div>
+			<div className="w-full flex justify-end p-2 pt-1">
+				<p className="text-xs text-gutter group-hover:text-accent">
+					{metadata.date}
+				</p>
+			</div>
+		</Link>
+	);
+}