From 0d7b760f91902bd0ce02304abed2d1c20e754839 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 31 Jan 2024 19:40:33 +0100
Subject: [PATCH] introducing countrySelect component

---
 src/assets/css/components/CountrySelect.scss | 13 +++++++++
 src/components/CountrySelect.jsx             | 28 ++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/assets/css/components/CountrySelect.scss
 create mode 100644 src/components/CountrySelect.jsx

diff --git a/src/assets/css/components/CountrySelect.scss b/src/assets/css/components/CountrySelect.scss
new file mode 100644
index 0000000..c4668dc
--- /dev/null
+++ b/src/assets/css/components/CountrySelect.scss
@@ -0,0 +1,13 @@
+.country-select {
+	@apply bg-white border border-neutral-300 border-solid max-h-64 overflow-y-auto rounded-lg shadow-lg text-white w-fit;
+	&__country-list {
+		overflow-y: scroll;
+		@apply list-none;
+	}
+	li {
+		@apply flex items-center text-neutral-800 py-1;
+		.flag {
+			@apply pr-4;
+		}
+	}
+}
diff --git a/src/components/CountrySelect.jsx b/src/components/CountrySelect.jsx
new file mode 100644
index 0000000..71ef76d
--- /dev/null
+++ b/src/components/CountrySelect.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { COUNTRIES } from "../utils/countries.js";
+import { v4 as uuidv4 } from "uuid";
+
+export default function CountrySelect() {
+	const test = COUNTRIES.map((country) => {
+		if (!country.value) return;
+		return (
+			<li key={uuidv4()} value={country.value}>
+				<img
+					className='flag'
+					src={`https://flagsapi.com/${country.value}/flat/32.png`}
+					alt=''
+				/>
+				{country.title}
+			</li>
+		);
+	});
+
+	if (!COUNTRIES) return;
+
+	return (
+		<div className='country-select'>
+			<button className='country-select__toggle'>Salut</button>
+			<ul className='country-select__country-list'>{test}</ul>;
+		</div>
+	);
+}