diff --git a/src/components/CloseButton/index.jsx b/src/components/CloseButton/index.jsx new file mode 100644 index 0000000..9ed5c0a --- /dev/null +++ b/src/components/CloseButton/index.jsx @@ -0,0 +1,18 @@ +import * as S from '../../styles/CloseButton.styles'; + +function CloseButton({ onClick }) { + return ( + + + + + + ); +} + +export default CloseButton; diff --git a/src/components/CustomDialog/Transition.jsx b/src/components/CustomDialog/Transition.jsx new file mode 100644 index 0000000..7ea4baf --- /dev/null +++ b/src/components/CustomDialog/Transition.jsx @@ -0,0 +1,14 @@ +import { Slide } from '@mui/material'; +import React from 'react'; + +const Transition = React.forwardRef(function Transition(props, ref) { + return ( + + ); +}); + +export default Transition; diff --git a/src/components/CustomDialog/index.jsx b/src/components/CustomDialog/index.jsx new file mode 100644 index 0000000..5cfc498 --- /dev/null +++ b/src/components/CustomDialog/index.jsx @@ -0,0 +1,46 @@ +import * as S from '../../styles/CustomDialog.styles'; +import { Dialog } from '@mui/material'; +import Transition from './transition'; +import CloseButton from '../CloseButton'; + +function CustomDialog({ + children, + open, + onClose, + hasCloseButton = true, + title, +}) { + return ( + + {hasCloseButton && ( + + {title} + + + )} + {children} + + ); +} + +export default CustomDialog; diff --git a/src/styles/CloseButton.styles.js b/src/styles/CloseButton.styles.js new file mode 100644 index 0000000..e861288 --- /dev/null +++ b/src/styles/CloseButton.styles.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const CloseButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + border: none; + background-color: transparent; + cursor: pointer; + outline: none; + padding: 0; + + & > svg { + width: 24px; + height: 24px; + fill: ${({ theme }) => theme.colors.gray700}; + } +`; diff --git a/src/styles/CustomDialog.styles.js b/src/styles/CustomDialog.styles.js new file mode 100644 index 0000000..962906f --- /dev/null +++ b/src/styles/CustomDialog.styles.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +export const DialogHeader = styled.header` + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const DialogTitle = styled.h2` + font-size: 18px; + font-weight: 700; + padding: 0 8px; + margin: 0; + user-select: none; + box-sizing: border-box; + color: ${({ theme }) => theme.colors.gray900}; +`;