feat: enhance UI components with backdrop blur effects and improved background styles for better visual aesthetics

This commit is contained in:
Julien Froidefond
2025-10-17 11:09:07 +02:00
parent 8d6f8f4de7
commit faca1cdce6
44 changed files with 112 additions and 101 deletions

View File

@@ -61,7 +61,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
<button
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
aria-label="Page précédente"
>
<ChevronLeft className="h-4 w-4" />
@@ -87,8 +87,8 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
className={cn(
"inline-flex items-center justify-center rounded-md text-sm font-medium h-10 w-10",
page === currentPage
? "bg-primary text-primary-foreground"
: "hover:bg-accent hover:text-accent-foreground"
? "bg-primary/90 backdrop-blur-md text-primary-foreground"
: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground"
)}
aria-label={`Page ${page}`}
aria-current={page === currentPage ? "page" : undefined}
@@ -103,7 +103,7 @@ export function Pagination({ currentPage, totalPages, onPageChange, className }:
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
aria-label="Page suivante"
>
<span className="sr-only md:not-sr-only">Suivant</span>