DailyLogEmptyState.tsx 913 B

12345678910111213141516171819202122232425262728
  1. "use client"
  2. import { BookOpen } from "lucide-react"
  3. import { Button } from "@/components/ui/button"
  4. interface DailyLogEmptyStateProps {
  5. onAddFirst: () => void
  6. }
  7. export function DailyLogEmptyState({ onAddFirst }: DailyLogEmptyStateProps) {
  8. return (
  9. <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
  10. <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
  11. <BookOpen className="w-8 h-8 text-primary" />
  12. </div>
  13. <h3 className="text-lg font-semibold text-gray-900 mb-2">
  14. Comienza tu diario
  15. </h3>
  16. <p className="text-gray-600 mb-6 max-w-md">
  17. Registra cómo te sientes cada día y lleva un seguimiento de tu bienestar.
  18. Identifica patrones y mejora tu salud mental.
  19. </p>
  20. <Button onClick={onAddFirst}>
  21. Crear mi primer registro
  22. </Button>
  23. </div>
  24. )
  25. }