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>
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import type { Guide } from '@/data/guides'
|
|
|
|
interface GuideCardProps {
|
|
guide: Guide
|
|
}
|
|
|
|
export function GuideCard({ guide }: GuideCardProps) {
|
|
const Icon = guide.icon
|
|
|
|
return (
|
|
<Link
|
|
to={`/guides/${guide.slug}`}
|
|
className="card-interactive block rounded-lg p-5 transition-all"
|
|
>
|
|
<div className="flex items-start gap-3.5">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
|
|
<Icon size={20} className="text-primary" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h3 className="text-sm font-heading font-semibold text-foreground mb-1">
|
|
{guide.title}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground leading-relaxed">
|
|
{guide.summary}
|
|
</p>
|
|
<span className="mt-2 inline-block font-sans text-[0.625rem] uppercase tracking-widest text-primary">
|
|
{guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|