UX: Consistent reading time display across all post cards

[bobbyonmagic]

Problem

Reading time is shown inconsistently across different post card components and pages:

• Some cards show reading time (e.g., blog posts)
• Other cards don't show it (e.g., guides, exercises)
• Different formats used ("5 min read" vs "5m" vs "5 minutes")
• Sometimes shown in description area, sometimes in metadata

Current Inconsistencies

• components/post-card.tsx - Shows reading time
• components/guide-card.tsx - May or may not show
• Various list components handle it differently

Proposed Solution

1. Standardize format: "X min read" (consistent with Medium, dev.to)
2. Always display: On all content cards (posts, guides, exercises, etc.)
3. Consistent placement: Below title, next to date/category
4. Icon: Add clock icon for visual clarity

Implementation

// components/ui/reading-time.tsx
import { Clock } from 'lucide-react'

export function ReadingTime({ minutes }: { minutes: number }) {
  return (
    <span className="flex items-center gap-1 text-sm text-muted-foreground">
      <Clock size={14} />
      {minutes} min read
    </span>
  )
}

Acceptance Criteria

• Reading time shown on ALL content cards
• Consistent "X min read" format everywhere
• Same visual styling (icon + text)
• Positioned consistently in card metadata area