feat: Create ConfirmModal component.

Author: zouhir96

src/components/Elements/Modal/ConfirmModal.tsx

@@ -0,0 +1,42 @@
+import { Button, Modal } from 'src/components/Elements'
+import './confirmModal.css'
+
+interface LogoutModalProps {
+  showModal: boolean
+  title: string
+  description: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export const ConfirmModal = ({
+  showModal,
+  title,
+  description,
+  onClose,
+  onConfirm,
+}: LogoutModalProps) => {
+  return (
+    <Modal
+      showModal={showModal}
+      onClose={onClose}
+      header={{
+        title: title,
+        className: undefined,
+        icon: undefined,
+      }}
+      className="confirmModal">
+      <div className="content">
+        <p className="description">{description}</p>
+        <div className="buttons">
+          <Button onClick={onClose} size="medium">
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} size="medium">
+            Confirm
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

src/components/Elements/Modal/confirmModal.css

@@ -0,0 +1,20 @@
+@media (min-width: 768px) {
+  .confirmModal {
+    width: 400px;
+    overflow-y: hidden;
+  }
+}
+
+.confirmModal .content {
+  display: flex;
+  flex-direction: column;
+}
+.confirmModal .description {
+  font-size: 1em;
+}
+.confirmModal .buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-self: flex-end;
+}

src/components/Elements/Modal/index.ts

@@ -1 +1,2 @@
+export * from './ConfirmModal'
 export * from './Modal'