Paul Bailey
e51e88fddd
- Implement toast notification system for success/error messages - Add loading states with skeleton loaders for async operations - Create smooth CSS transitions and animations - Enhance empty states with EmptyState component - Add loading.tsx files for Next.js loading states - Integrate toast notifications across all CRUD operations - Add fade-in and scale-in animations for better UX - Improve visual feedback for user actions
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { ReactNode } from 'react'
|
|
import { Inbox, ListTodo, Search, Filter } from 'lucide-react'
|
|
|
|
interface EmptyStateProps {
|
|
icon?: 'inbox' | 'list' | 'search' | 'filter'
|
|
title: string
|
|
description?: string
|
|
action?: ReactNode
|
|
}
|
|
|
|
export default function EmptyState({ icon = 'inbox', title, description, action }: EmptyStateProps) {
|
|
const icons = {
|
|
inbox: <Inbox size={48} className="text-gray-300" />,
|
|
list: <ListTodo size={48} className="text-gray-300" />,
|
|
search: <Search size={48} className="text-gray-300" />,
|
|
filter: <Filter size={48} className="text-gray-300" />,
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-12 sm:py-16 px-4 text-center">
|
|
<div className="mb-4 sm:mb-6 opacity-50">
|
|
{icons[icon]}
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-semibold text-gray-700 mb-2">
|
|
{title}
|
|
</h3>
|
|
{description && (
|
|
<p className="text-sm sm:text-base text-gray-500 mb-6 max-w-md">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{action && (
|
|
<div className="mt-4">
|
|
{action}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|