chihlasm
2bcd3e2f3c
- Home sidebar icon: always cyan, bg-accent-dim only when route is "/" - Mobile TopBar: add left padding so hamburger isn't hidden behind logo - Landing page: bump card border color (#1e2130 → #2a2f3d) for better contrast - Replace all font-label references (40 occurrences, 19 files) with font-mono or font-sans - Remove deprecated --font-label CSS variable from index.css - Convert hardcoded hex in layout inline styles to CSS variables (light-mode ready) - Add @types/react-syntax-highlighter for script builder types Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { ShieldAlert } from 'lucide-react'
|
||
import { cn } from '@/lib/utils'
|
||
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
|
||
onConfigure: (id: string) => void
|
||
}
|
||
|
||
export function TemplateCard({ template, onConfigure }: Props) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'w-full px-4 py-3 rounded-xl border transition-all',
|
||
'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-sans 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 justify-between gap-3">
|
||
<div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-sans">
|
||
<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
|
||
type="button"
|
||
onClick={() => onConfigure(template.id)}
|
||
className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
|
||
>
|
||
Configure →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|