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
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { Edit2 } from 'lucide-react'
|
|
import Modal from './Modal'
|
|
import ListForm from './ListForm'
|
|
import DeleteListButton from './DeleteListButton'
|
|
|
|
interface List {
|
|
id: string
|
|
title: string
|
|
color: string
|
|
items: Array<{
|
|
id: string
|
|
completed: boolean
|
|
}>
|
|
}
|
|
|
|
export default function ListCard({ list }: { list: List }) {
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false)
|
|
const completedCount = list.items.filter(item => item.completed).length
|
|
const totalCount = list.items.length
|
|
const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
|
|
|
|
const handleEditClick = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsEditModalOpen(true)
|
|
}
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Link href={`/list/${list.id}`}>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 hover:shadow-md active:shadow-lg transition-all cursor-pointer group min-h-[140px] sm:min-h-[160px]">
|
|
<div className="flex items-start justify-between mb-4 gap-2">
|
|
<div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
|
|
<div
|
|
className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: list.color }}
|
|
/>
|
|
<h3 className="font-semibold text-gray-900 truncate text-base sm:text-lg">{list.title}</h3>
|
|
</div>
|
|
<div className="flex items-center gap-0.5 sm:gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0" onClick={handleDeleteClick}>
|
|
<button
|
|
onClick={handleEditClick}
|
|
className="text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm hover:bg-gray-100 active:bg-gray-200 rounded-lg"
|
|
aria-label="Edit list"
|
|
>
|
|
<Edit2 size={18} />
|
|
</button>
|
|
<DeleteListButton
|
|
listId={list.id}
|
|
listTitle={list.title}
|
|
itemCount={totalCount}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2.5 sm:space-y-3">
|
|
<div className="flex items-center justify-between text-xs sm:text-sm text-gray-600">
|
|
<span>{completedCount} of {totalCount} completed</span>
|
|
<span className="font-medium">{Math.round(progress)}%</span>
|
|
</div>
|
|
|
|
<div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
|
|
<div
|
|
className="h-2 sm:h-2.5 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${progress}%`,
|
|
backgroundColor: list.color
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<Modal
|
|
isOpen={isEditModalOpen}
|
|
onClose={() => setIsEditModalOpen(false)}
|
|
title="Edit List"
|
|
>
|
|
<ListForm
|
|
list={list}
|
|
onCancel={() => setIsEditModalOpen(false)}
|
|
onSuccess={() => setIsEditModalOpen(false)}
|
|
/>
|
|
</Modal>
|
|
</>
|
|
)
|
|
} |