Répare la liste

mon-entreprise/source/pages/Stats/DemandesUtilisateurs.tsx

@@ -1,9 +1,9 @@
-import { FromTop } from 'Components/ui/animate'
 import { H2, H3 } from 'DesignSystem/typography/heading'
 import { Link } from 'DesignSystem/typography/link'
 import { Li, Ul } from 'DesignSystem/typography/list'
 import { Body } from 'DesignSystem/typography/paragraphs'
 import { useState } from 'react'
+import styled from 'styled-components'
 import stats from '../../data/stats.json'
 
 export default function DemandeUtilisateurs() {
@@ -16,79 +16,60 @@ export default function DemandeUtilisateurs() {
 			</Body>
 
 			<H3>En attente d'implémentation</H3>
-			<Pagination
-				items={stats.retoursUtilisateurs.open}
-				itemComponent={Issue}
-			/>
+			<Pagination items={stats.retoursUtilisateurs.open} />
 
 			<H3>Réalisées</H3>
-			<Pagination
-				items={stats.retoursUtilisateurs.closed}
-				itemComponent={Issue}
-			/>
+			<Pagination items={stats.retoursUtilisateurs.closed} />
 		</section>
 	)
 }
 
-type PaginationProps<ItemProps> = {
-	itemComponent: React.FC<ItemProps>
-	items: Array<ItemProps>
-}
-
-function Pagination<ItemProps>({
-	itemComponent,
-	items,
-}: PaginationProps<ItemProps>) {
-	const [currentPage, setCurrentPage] = useState(0)
-	return (
-		<>
-			<Ul>
-				{items
-					.slice(currentPage * 10, (currentPage + 1) * 10)
-					.map(itemComponent)}
-			</Ul>
-			<div css={{ textAlign: 'center' }}>
-				Page :
-				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
-					<button
-						className="ui__ small"
-						onClick={() => setCurrentPage(i)}
-						style={i === currentPage ? { fontWeight: 'bold' } : {}}
-						key={i}
-					>
-						{i + 1}
-					</button>
-				))}
-			</div>
-		</>
-	)
-}
-
-function Issue({
-	title,
-	number,
-	count,
-	closedAt,
-}: {
+type IssueProps = {
 	title: string
 	number: number
 	count: number
 	closedAt: string | null
-}) {
+}
+
+type PaginationProps = {
+	items: Array<IssueProps>
+}
+
+function Pagination({ items }: PaginationProps) {
+	const [currentPage, setCurrentPage] = useState(0)
 	return (
-		<FromTop>
-			<Li>
-				{count > 1 && <span>{count} demandes</span>}{' '}
-				<Link
-					href={`https://github.com/betagouv/mon-entreprise/issues/${number}`}
-				>
-					{title}
-				</Link>{' '}
-				{closedAt && (
-					<small>(Résolu en {formatMonth(new Date(closedAt))})</small>
-				)}
-			</Li>
-		</FromTop>
+		<>
+			<Ul>
+				{items.slice(currentPage * 10, (currentPage + 1) * 10).map((item) => (
+					<Issue key={`issue-${item.number}`} {...item} />
+				))}
+			</Ul>
+			<Pager>
+				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
+					<PagerButton
+						onClick={() => setCurrentPage(i)}
+						currentPage={currentPage === i}
+						key={i}
+					>
+						{i + 1}
+					</PagerButton>
+				))}
+			</Pager>
+		</>
+	)
+}
+
+function Issue({ title, number, count, closedAt }: IssueProps) {
+	return (
+		<Li>
+			{count > 1 && <span>{count} demandes</span>}{' '}
+			<Link
+				href={`https://github.com/betagouv/mon-entreprise/issues/${number}`}
+			>
+				{title}
+			</Link>{' '}
+			{closedAt && <small>(Résolu en {formatMonth(new Date(closedAt))})</small>}
+		</Li>
 	)
 }
 
@@ -98,3 +79,42 @@ function formatMonth(date: string | Date) {
 		year: 'numeric',
 	})
 }
+
+type PagerButtonProps = {
+	currentPage: boolean
+}
+
+const PagerButton = styled.button<PagerButtonProps>`
+	padding: 0.375rem 0.5rem;
+	border: 1px solid
+		${({ theme, currentPage }) =>
+			currentPage
+				? theme.colors.bases.primary[500]
+				: theme.colors.extended.grey[300]};
+	margin-right: 0.25rem;
+	background-color: ${({ theme, currentPage }) =>
+		currentPage
+			? theme.colors.bases.primary[100]
+			: theme.colors.extended.grey[100]};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.colors.bases.primary[100]};
+	}
+
+	&:first-child {
+		border-top-left-radius: 0.25rem;
+		border-bottom-left-radius: 0.25rem;
+	}
+
+	&:last-child {
+		border-top-right-radius: 0.25rem;
+		border-bottom-right-radius: 0.25rem;
+		margin-right: 0;
+	}
+`
+
+const Pager = styled.div`
+	font-family: ${({ theme }) => theme.fonts.main};
+	text-align: center;
+	margin: auto;
+`