Paul Bailey
a037117b15
- Add touch-optimized tap targets (44x44px minimum for iOS) - Enhance mobile responsiveness across all components - Improve button sizing and spacing for touch interactions - Add responsive text sizing and layout adjustments - Implement mobile-first modal behavior (bottom sheet on mobile) - Enhance form controls with better touch targets - Add active states for better touch feedback - Improve grid layouts for various screen sizes - Add smooth scrolling and better focus states - Optimize FilterPanel for mobile with grid layouts - Enhance all interactive elements with tap-target classes Requirements: 7.1, 7.2
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { getLists } from '@/lib/actions'
|
|
import ListCard from '@/components/ListCard'
|
|
import NewListButton from '@/components/NewListButton'
|
|
import GlobalSearch from '@/components/GlobalSearch'
|
|
|
|
export default async function Home() {
|
|
const lists = await getLists()
|
|
|
|
return (
|
|
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
|
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">Ultimate Lists</h1>
|
|
<NewListButton />
|
|
</div>
|
|
|
|
{/* Global Search */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<GlobalSearch />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
|
|
{lists.map((list) => (
|
|
<ListCard key={list.id} list={list} />
|
|
))}
|
|
</div>
|
|
|
|
{lists.length === 0 && (
|
|
<div className="text-center py-12 sm:py-16">
|
|
<p className="text-gray-500 text-base sm:text-lg mb-3 sm:mb-4">No lists yet</p>
|
|
<p className="text-gray-400 text-sm sm:text-base">Create your first list to get started</p>
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
} |