+ {!status && (
+
+ )}
+
+ {status === 'pending' && (
+
+ )}
+
+ {status === 'done' && (
+
+
+
+ )}
+
+ {error && (
+
{error.message}
Code erreur : {error.name}
+ )}
+
+ )
+}
diff --git a/src/app/outils/csv/components/selectable-item-list.style.tsx b/src/app/outils/csv/components/selectable-item-list.style.tsx
new file mode 100644
index 000000000..adcc4d6c1
--- /dev/null
+++ b/src/app/outils/csv/components/selectable-item-list.style.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import styled from 'styled-components'
+import theme from '@/theme'
+
+export const SelectableItemListWrapper = styled.div`
+ .list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
+ grid-gap: 5px;
+ }
+
+ .item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid ${theme.colors.grey.main};
+ white-space: nowrap;
+ width: 100%;
+ background: ${theme.colors.primary.bg};
+ color: ${theme.colors.grey.main};
+ cursor: pointer;
+ }
+
+ .item .text {
+ overflow: auto;
+ text-overflow: ellipsis;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ color: ${theme.colors.grey};
+ }
+
+ .selection {
+ margin: 2em 0;
+ padding: 0.5em;
+ border: 1px dashed #ccc;
+ background: #fff;
+ }
+
+ .button {
+ font-size: larger;
+ font-weight: bold;
+ text-align: center;
+ min-width: 20px;
+ background: ${theme.colors.primary.badge};
+ }
+`
diff --git a/src/app/outils/csv/components/selectable-item-list.tsx b/src/app/outils/csv/components/selectable-item-list.tsx
new file mode 100644
index 000000000..2a3d07138
--- /dev/null
+++ b/src/app/outils/csv/components/selectable-item-list.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { SelectableItemListWrapper } from './selectable-item-list.style'
+
+import ActionButtonNeutral from '../components/action-button-neutral'
+
+interface SelectableItemListPropType {
+ list: Array<{ key: string, value: string }>
+ buttonIcon: '+' | '-'
+ action: Function
+}
+
+export default function SelectableItemList({ list, buttonIcon, action }: SelectableItemListPropType) {
+ return (
+