[#2] feat: add Modal component

Author: damla

client/src/components/Layout/index.jsx

@@ -1,16 +1,23 @@
-import { Header, SubHeader, Sidebar, Section } from "..";
+import { useState } from "react";
+import { Header, SubHeader, Sidebar, Section, Modal } from "..";
 
 import styles from "./styles.module.scss";
 
 export default function Layout() {
+  const [showModal] = useState(false);
+
   return (
-    <div className={styles.Container}>
-      <Header />
-      <SubHeader />
-      <div className={styles.Wrapper}>
-        <Sidebar />
-        <Section />
+    <>
+      <div className={styles.Container}>
+        <Header />
+        <SubHeader />
+        <div className={styles.Wrapper}>
+          <Sidebar />
+          <Section />
+        </div>
+        {showModal && <Modal />}
       </div>
-    </div>
+      <div className={showModal && styles.GrayLayer}></div>
+    </>
   );
 }

client/src/components/Layout/styles.module.scss

@@ -7,6 +7,7 @@
   align-items: center;
   height: 100vh;
   width: 100vw;
+  position: relative;
 
   .Wrapper {
     display: flex;
@@ -16,3 +17,14 @@
     justify-content: space-between;
   }
 }
+.GrayLayer {
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  min-height: 100vh;
+  min-width: 100vw;
+  background-color: #e5e5e5;
+  opacity: 0.5;
+  z-index: 99;
+}

client/src/components/Modal/index.jsx

@@ -0,0 +1,25 @@
+import styles from "./styles.module.scss";
+
+export default function Modal() {
+  return (
+    <div className={styles.Container}>
+      <div className={styles.Header}>
+        <h3>Ürünü silmek istediğinize emin misiniz?</h3>
+      </div>
+      <div className={styles.Body}>
+        <p className={styles.Content}>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentiall....
+        </p>
+      </div>
+      <div className={styles.Footer}>
+        <button className={styles.Yes}>EVET</button>
+        <button className={styles.No}>HAYIR</button>
+      </div>
+    </div>
+  );
+}

client/src/components/Modal/styles.module.scss

@@ -0,0 +1,73 @@
+@use "../../global/variables.scss" as vars;
+
+.Container {
+  color: vars.$primary-font-color;
+  max-width: 400px;
+  width: 400px;
+  height: 260px;
+  background-color: #fff;
+  border: 1px solid rgba(228, 228, 228, 0.6);
+  box-shadow: 0px 6px 12px rgba(50, 50, 71, 0.07);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: absolute;
+  top: 250px;
+  z-index: 999;
+
+  .Header {
+    display: flex;
+    align-items: center;
+    padding-left: 18px;
+    padding-right: 18px;
+    border-bottom: 1px solid #cdcdcd;
+    height: 60px;
+  }
+
+  .Body {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 16px;
+    font-size: 12px;
+    line-height: 17px;
+
+    .Content {
+      font-weight: normal;
+      font-size: 12px;
+    }
+  }
+
+  .Footer {
+    display: flex;
+    justify-content: flex-end;
+    height: 56px;
+    padding-right: 20px;
+    align-items: flex-end;
+    padding-bottom: 20px;
+
+    .Yes {
+      background: #90d659;
+      border-radius: 4px;
+      width: 70px;
+      height: 26px;
+      outline: none;
+      border: none;
+      color: #fff;
+    }
+
+    .No {
+      margin-left: 10px;
+      background: #d65959;
+      width: 70px;
+      height: 26px;
+      border-radius: 4px;
+      outline: none;
+      border: none;
+      color: #fff;
+    }
+  }
+}

client/src/components/index.jsx

@@ -17,3 +17,5 @@ export { default as ProductTable } from "./ProductTable";
 export { default as ProductRow } from "./ProductTable/ProductRow";
 export { default as ProductItem } from "./ProductTable/ProductItem";
 export { default as Pagination } from "./ProductTable/Pagination";
+export { default as AddButton } from "./AddButton";
+export { default as Modal } from "./Modal";