Paul Bailey
87f91ecbe0
- Add database indexes for frequently queried fields (listId, completed, priority, dueDate, createdAt) - Add compound indexes for common query patterns (listId+completed, listId+priority) - Implement pagination support in getItemsByFilter with configurable page size (default 50) - Optimize components with React.memo (ItemCard, ListCard, FilterPanel, SearchBar, SearchResults, EmptyState) - Configure Next.js for better bundle optimization: - Enable optimizePackageImports for lucide-react - Enable SWC minification - Remove console logs in production (except errors/warnings) - Optimize images with AVIF/WebP formats - Enable compression - Disable production source maps for smaller bundles - Loading states already implemented to prevent layout shift Task 18 complete - all performance optimizations implemented
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { memo, ReactNode } from 'react'
|
|
import { Inbox, ListTodo, Search, Filter } from 'lucide-react'
|
|
|
|
interface EmptyStateProps {
|
|
icon?: 'inbox' | 'list' | 'search' | 'filter'
|
|
title: string
|
|
description?: string
|
|
action?: ReactNode
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default memo(EmptyState)
|