✨ 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;
+				}
+			}
+		}
+	}
+}