3fbbb1a93b
- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { BookOpen, Sparkles } from 'lucide-react';
|
|
|
|
interface EmptyHistoryStateProps {
|
|
onStartVent?: () => void;
|
|
}
|
|
|
|
/**
|
|
* EmptyHistoryState Component
|
|
*
|
|
* Story 3.1: Encouraging empty state for new users
|
|
*
|
|
* Shown when user has no completed drafts yet.
|
|
* Displays:
|
|
* - Encouraging message
|
|
* - Calming illustration (using icons)
|
|
* - CTA to start first vent
|
|
*/
|
|
export function EmptyHistoryState({ onStartVent }: EmptyHistoryStateProps) {
|
|
return (
|
|
<div className="empty-history-state flex flex-col items-center justify-center py-16 px-6 text-center">
|
|
{/* Illustration */}
|
|
<div className="mb-6 relative">
|
|
<div className="w-32 h-32 bg-gradient-to-br from-slate-100 to-slate-200 rounded-full flex items-center justify-center">
|
|
<BookOpen className="w-16 h-16 text-slate-400" aria-hidden="true" />
|
|
</div>
|
|
<Sparkles className="w-8 h-8 text-amber-400 absolute -top-2 -right-2" aria-hidden="true" />
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<h2 className="text-2xl font-bold text-slate-800 mb-2 font-serif">
|
|
Your journey starts here
|
|
</h2>
|
|
<p className="text-slate-600 mb-6 max-w-md font-sans">
|
|
Every venting session becomes a learning moment. Start your first session to see your growth unfold.
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<button
|
|
onClick={onStartVent}
|
|
type="button"
|
|
className="min-h-[44px] px-6 py-3 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-colors flex items-center gap-2 font-sans"
|
|
>
|
|
<Sparkles className="w-5 h-5" aria-hidden="true" />
|
|
<span>Start My First Vent</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|