✨ Display & Delete in love list

components/ConfirmPopup/ConfirmPopup.tsx

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import CheckIcon from '@/assets/CheckIcon';
+import CloseIcon from '@/assets/CloseIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+type Props = {
+	title: string;
+	content: string | JSX.Element;
+	message?: string;
+	onClose: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+	onAccept?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+	onDeny?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+const ConfirmPopup = ({
+	title,
+	content,
+	message,
+	onClose,
+	onAccept,
+	onDeny = onClose,
+}: Props) => {
+	return (
+		<div className='popupOverlay'>
+			<div
+				className='popup'
+				onClick={(ev) => ev.stopPropagation()}
+			>
+				<div className='popupHeader'>
+					<p className='popupTitle'>{title}</p>
+					<button
+						className='popupCloseButton'
+						onClick={onClose}
+					>
+						<CloseIcon />
+					</button>
+				</div>
+				<div className='popupContent'>{message || content}</div>
+				<div className='popupButtonsContainer'>
+					<button
+						type='button'
+						className='popupButton'
+						onClick={onDeny}
+					>
+						<CloseIcon />
+						Non
+					</button>
+
+					<button
+						type='button'
+						className='popupButton'
+						onClick={onAccept}
+					>
+						<CheckIcon />
+						{message ? 'Réessayer' : 'Oui'}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ConfirmPopup;

components/ConfirmPopup/styles.scss

@@ -0,0 +1,88 @@
+.popupOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(#ffffff, 0.2);
+	backdrop-filter: blur(2px);
+
+	& > .popup {
+		z-index: 1;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin: 10px;
+		border: 1px solid #e1e1e1;
+		border-radius: 10px;
+		background-color: #ffffff;
+		overflow: hidden;
+
+		& > .popupHeader {
+			display: grid;
+			grid-template-columns: 1fr 20px;
+			align-items: center;
+			gap: 20px;
+			padding: 10px;
+			border-bottom: 1px solid #e1e1e1;
+			background-color: #f9e2e5;
+
+			& > .popupTitle {
+				font-size: 1.1rem;
+				color: #d94253;
+			}
+
+			& > .popupCloseButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border: none;
+				border-radius: 5px;
+				background-color: transparent;
+				color: #d94253;
+				cursor: pointer;
+			}
+		}
+
+		& > .popupContent {
+			padding: 10px;
+			font-size: 0.95rem;
+			font-weight: 300;
+			color: #d94253;
+		}
+
+		& > .popupButtonsContainer {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-evenly;
+			align-items: center;
+			padding: 10px;
+
+			& > .popupButton {
+				display: grid;
+				grid-template-columns: 20px 1fr;
+				align-items: center;
+				gap: 5px;
+				padding: 5px 15px;
+				border: 1px solid #a8a5a6;
+				border-radius: 5px;
+				background-color: #ffffff;
+				font-size: 1rem;
+				color: #d94253;
+				cursor: pointer;
+				transition: background-color 0.3s ease;
+
+				&:first-child {
+					border: none;
+				}
+
+				&:hover {
+					background-color: #f9e2e5;
+				}
+			}
+		}
+	}
+}

components/InlineInput/InlineInput.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-// ---------------------------------------------------------------------------------------------------------------------
-//!                                                      Imports
-// ---------------------------------------------------------------------------------------------------------------------
-
-// ------------------------------------------------------ React --------------------------------------------------------
-import { FormEvent } from 'react';
-// ---------------------------------------------------------------------------------------------------------------------
-
-// ------------------------------------------------- Assets & Styles ---------------------------------------------------
-import CheckIcon from '@/assets/CheckIcon';
-import CloseIcon from '@/assets/CloseIcon';
-import './styles.scss';
-// ---------------------------------------------------------------------------------------------------------------------
-
-const InlineInput = ({
-	label = '',
-	name = '',
-	type = 'text',
-	placeholder = '',
-	defaultValue = '',
-	autoComplete = 'off',
-	onSubmit = (value?: string) => {},
-}) => {
-	const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
-		ev.preventDefault();
-
-		if (!ev.currentTarget.reportValidity()) {
-			return;
-		}
-
-		const formData = new FormData(ev.currentTarget);
-
-		const value = formData.get(name);
-
-		onSubmit(value ? value.toString() : null);
-	};
-
-	return (
-		<form
-			className='inlineInputContainer'
-			onSubmit={handleSubmit}
-		>
-			<label
-				htmlFor={name}
-				className='inlineInputLabel'
-			>
-				{label}
-			</label>
-
-			<div className='inlineInputRow'>
-				<input
-					type={type}
-					name={name}
-					id={name}
-					defaultValue={defaultValue}
-					placeholder={placeholder}
-					autoComplete={autoComplete}
-					className='inlineInput'
-					required
-				/>
-				<button
-					type='reset'
-					className='inlineInputButton'
-				>
-					<CloseIcon />
-				</button>
-				<button
-					type='submit'
-					className='inlineInputButton'
-				>
-					<CheckIcon />
-				</button>
-			</div>
-		</form>
-	);
-};
-
-export default InlineInput;

components/InlineInput/styles.scss

@@ -1,50 +0,0 @@
-.inlineInputContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-
-	& > .inlineInputLabel {
-		margin-left: 5px;
-		font-size: 1.1rem;
-		color: #d94253;
-	}
-
-	& > .inlineInputRow {
-		display: grid;
-		grid-template-columns: 1fr repeat(2, calc(1rem + 14px));
-		align-items: center;
-		gap: 5px;
-
-		& > .inlineInput {
-			padding: 7px 14px;
-			border: 1px solid #d94253;
-			border-radius: 5px;
-			background-color: #f5cfd3;
-			outline: none;
-			font-size: 0.9rem;
-			color: #d94253;
-			outline: none;
-
-			&::placeholder {
-				color: #d94253;
-			}
-		}
-
-		& > .inlineInputButton {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 5px;
-			border: none;
-			border-radius: 5px;
-			background-color: transparent;
-			color: #d94253;
-			cursor: pointer;
-			transition: background-color 0.3s ease;
-
-			&:hover {
-				background-color: rgba(#d94253, 0.5);
-			}
-		}
-	}
-}

components/Input/styles.scss

@@ -5,15 +5,21 @@
 	& > .input {
 		padding: 7px 14px;
 		width: 100%;
-		border: 1px solid #d94253;
+		border: 1px solid #e1e1e1;
 		border-radius: 5px;
-		background-color: #f5cfd3;
-		font-size: 0.9rem;
+		background-color: #ffffff;
+		font-size: 0.95rem;
+		font-weight: 300;
 		color: #d94253;
 		outline: none;
+		transition: border-color 0.3s ease;
 
 		&::placeholder {
-			color: #d94253;
+			color: #eca0a9;
+		}
+
+		&:focus {
+			border-color: #d94253;
 		}
 	}
 
@@ -29,6 +35,6 @@
 		height: 100%;
 		border: none;
 		background-color: transparent;
-		color: #d94253;
+		color: #eca0a9;
 	}
 }