feat: build module selection

src/components/ModuleCard.tsx

@@ -0,0 +1,62 @@
+interface ModuleCardProps {
+	name: string;
+	description: string;
+	selected: boolean;
+	onClick: () => void;
+}
+
+export function ModuleCard({
+	name,
+	description,
+	selected,
+	onClick,
+}: ModuleCardProps) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={`
+        w-full text-left p-4 rounded-lg border-2 transition-all
+        ${
+					selected
+						? "border-blue-500 bg-blue-500/10"
+						: "border-slate-700 bg-slate-900/50 hover:border-slate-600"
+				}
+      `}
+		>
+			<div className="flex items-start gap-3">
+				<div className="mt-1">
+					<div
+						className={`
+              w-5 h-5 rounded border-2 flex items-center justify-center
+              ${selected ? "border-blue-500 bg-blue-500" : "border-slate-500"}
+            `}
+					>
+						{selected && (
+							<svg
+								className="w-3 h-3 text-white"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<title>Checkmark</title>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={3}
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						)}
+					</div>
+				</div>
+				<div className="flex-1 min-w-0">
+					<h4 className="font-semibold text-sm mb-1">{name}</h4>
+					<p className="text-xs text-slate-400 leading-relaxed">
+						{description}
+					</p>
+				</div>
+			</div>
+		</button>
+	);
+}