1  // libs
 2  import React from 'react';
 3  import Styled from 'styled-components';
 4  
 5  export interface Props {
 6    children: React.ReactNode;
 7  }
 8  
 9  const BackDropComponent = ({ children }: Props) => {
10    return <BackDrop.Layout>{children}</BackDrop.Layout>;
11  };
12  
13  const BackDrop = {
14    Layout: Styled.div`
15      position: absolute;
16      top: 0;
17      left: 0;
18      width: 100%;
19      height: 100%;
20      background-color: rgba(0, 0, 0, 0.7);
21      backdrop-filter: blur(5px);
22      display: flex;
23      align-items: center;
24      justify-content: center;
25      z-index: 1000;
26      animation: fadeIn 0.3s;
27    `,
28  };
29  
30  export default BackDropComponent;