feat:

1. Add components:
- Overlay;
- Modal;
2. Add animation in scss in this components;

eslint.config.js

@@ -3,7 +3,7 @@ import globals from 'globals';
 import eslintReact from 'eslint-plugin-react';
 import eslintReactHooks from 'eslint-plugin-react-hooks';
 import eslintReactRefresh from 'eslint-plugin-react-refresh';
-import stylistic from '@stylistic/eslint-plugin-js';
+
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -24,8 +24,7 @@ export default [
     plugins: {
       react: eslintReact,
       'react-hooks': eslintReactHooks,
-      'react-refresh': eslintReactRefresh,
-      '@stylistic': stylistic
+      'react-refresh': eslintReactRefresh
     },
     rules: {
       ...js.configs.recommended.rules,

src/App.jsx

@@ -1,8 +1,17 @@
+import Overlay from './layouts/Overlay/Overlay';
 import Counter from './components/Counter/Counter';
-
+import Modal from './components/Modal/Modal';
+import { useState } from 'react';
 function App() {
+
+  const [overlayState, setOverlayState] = useState(false);
   return (
-    <Counter />
+    <>
+      <Overlay active={overlayState}>
+        <Modal overlay={setOverlayState} isOverlay={overlayState} />
+      </Overlay>
+      <Counter overlay={setOverlayState} />
+    </>
   );
 }
 

src/components/Button/Button.scss

@@ -5,6 +5,8 @@
   border: none;
   background: transparent;
   cursor: pointer;
+  padding: unset;
+  ;
 
   &-base {
     padding: 10px 20px;

src/components/Counter/Counter.jsx

@@ -2,9 +2,10 @@ import { useState } from 'react';
 import Button from '../Button/Button';
 import Text from '../Text/Text';
 import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import VideoLabelIcon from '@mui/icons-material/VideoLabel';
 import './Counter.scss';
 
-function Counter() {
+function Counter({ overlay }) {
 
   const [count, setCount] = useState(0);
 
@@ -14,19 +15,36 @@ function Counter() {
   const removeCount = () => {
     setCount(prev => prev - 1);
   };
+
+  const setOverlay = () => {
+    overlay(true);
+  };
   return (
     <div className="counter">
-      <Button className="button counter__btn" onClick={() => setCount(0)} style={{ color: 'red' }}>
-        <RotateLeftIcon />
-      </Button>
+      <div className="counter__row">
+        <Button
+          className="button"
+          style={{ color: 'green' }}
+          title="Modal"
+          onClick={setOverlay}>
+          <VideoLabelIcon />
+        </Button>
+        <Button
+          className="button counter__btn"
+          onClick={() => setCount(0)}
+          style={{ color: 'red' }}
+        >
+          <RotateLeftIcon />
+        </Button>
+      </div>
       <Text tag="h1" className="counter__title">Base Counter
       </Text>
       <Text tag="h2" className="counter__count">Count: <span>{count}</span></Text>
       <div className="counter__control">
         <Button className="button-base button--secondary button--ucase" onClick={removeCount}>Remove -</Button>
         <Button className="button-base button--primary button--ucase" onClick={addCount}>Add +</Button>
       </div>
-    </div>
+    </div >
   );
 }
 

src/components/Counter/Counter.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 10px;
   max-width: 350px;
   width: 100%;
   margin: 0 auto;
@@ -15,6 +16,14 @@
     margin: .1em 0
   }
 
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+  }
+
   &__btn {
     align-self: flex-end;
   }

src/components/Modal/Modal.jsx

@@ -0,0 +1,20 @@
+import Button from '../Button/Button';
+import Text from '../Text/Text';
+import CloseIcon from '@mui/icons-material/Close';
+import './Modal.scss';
+
+function Modal({ ...props }) {
+  const { overlay, isOverlay } = props;
+
+  return (
+    <div className={`modal${isOverlay ? ' active' : ''}`}>
+      <Text tag="h2" className="modal__title">Modal
+        <Button className="button" onClick={() => overlay(false)}>
+          <CloseIcon style={{ color: '#313131' }} />
+        </Button>
+      </Text>
+    </div>
+  );
+}
+
+export default Modal;

src/components/Modal/Modal.scss

@@ -0,0 +1,55 @@
+$transition: .15s;
+
+.modal {
+  width: 500px;
+  aspect-ratio: 1;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  background: white;
+  border-radius: 15px;
+  padding: 15px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(0%, -30%);
+  transition: opacity $transition ease-in-out, visibility 0s $transition;
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+  }
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    animation: slideIn $transition ease-in-out forwards;
+    animation-delay: $transition;
+  }
+
+  &:not(.active) {
+    animation: slideOut $transition ease-in-out forwards;
+
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    transform: translate(0%, -30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0%, 0%);
+  }
+}
+
+@keyframes slideOut {
+  0% {
+    transform: translate(0%, 0%);
+  }
+
+  100% {
+    transform: translate(0%, 30%);
+  }
+}

src/layouts/Overlay/Overlay.jsx

@@ -0,0 +1,10 @@
+import './Overlay.scss';
+
+function overlay({ children, ...props }) {
+  const { active } = props;
+  return (
+    <div className={`overlay${active ? ' active' : ''}`}>{children}</div>
+  );
+}
+
+export default overlay;

src/layouts/Overlay/Overlay.scss

@@ -0,0 +1,19 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  transition: .3s;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}