From 19fde445fef0ef0e4d5d72a80845b9af7a1e0d9f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 02:10:25 -0400
Subject: [PATCH] feat: add TemplateCard component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/scripts/TemplateCard.tsx   | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/src/components/scripts/TemplateCard.tsx

diff --git a/frontend/src/components/scripts/TemplateCard.tsx b/frontend/src/components/scripts/TemplateCard.tsx
new file mode 100644
index 00000000..3b5d8931
--- /dev/null
+++ b/frontend/src/components/scripts/TemplateCard.tsx
@@ -0,0 +1,72 @@
+import { ShieldAlert } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
+import type { ScriptTemplateListItem } from '@/types'
+
+const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
+  beginner: 'text-emerald-400 bg-emerald-400/10',
+  intermediate: 'text-amber-400 bg-amber-400/10',
+  advanced: 'text-rose-500 bg-rose-500/10',
+}
+
+interface Props {
+  template: ScriptTemplateListItem
+}
+
+export function TemplateCard({ template }: Props) {
+  const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
+  const selectTemplate = useScriptGeneratorStore(s => s.selectTemplate)
+  const isActive = selectedTemplate?.id === template.id
+
+  return (
+    <button
+      type="button"
+      onClick={() => selectTemplate(template.id)}
+      className={cn(
+        'w-full text-left px-4 py-3 rounded-xl border transition-all',
+        'hover:border-white/12 hover:bg-white/4',
+        isActive
+          ? 'bg-primary/10 border-primary/30 border-l-[3px] border-l-primary'
+          : 'border-border bg-transparent'
+      )}
+    >
+      <div className="flex items-start justify-between gap-2 mb-1">
+        <span className="text-sm font-medium text-foreground line-clamp-1">
+          {template.name}
+        </span>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {template.requires_elevation && (
+            <span title="Requires administrator elevation">
+              <ShieldAlert size={13} className="text-amber-400" />
+            </span>
+          )}
+          <span className={cn('font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
+            {template.complexity}
+          </span>
+        </div>
+      </div>
+
+      {template.description && (
+        <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
+          {template.description}
+        </p>
+      )}
+
+      <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
+        <span>{template.usage_count}× used</span>
+        {template.tags.length > 0 && (
+          <div className="flex gap-1 flex-wrap">
+            {template.tags.slice(0, 3).map(tag => (
+              <span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5">
+                {tag}
+              </span>
+            ))}
+            {template.tags.length > 3 && (
+              <span className="text-muted-foreground">+{template.tags.length - 3}</span>
+            )}
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}