diff --git a/webapp/src/AppComponents/DeleteWorkbookDialog.tsx b/webapp/src/AppComponents/DeleteWorkbookDialog.tsx new file mode 100644 index 0000000..6b65fcb --- /dev/null +++ b/webapp/src/AppComponents/DeleteWorkbookDialog.tsx @@ -0,0 +1,160 @@ +import styled from "@emotion/styled"; +import { Trash2 } from "lucide-react"; +import { forwardRef, useEffect } from "react"; +import { theme } from "../theme"; + +export const DeleteWorkbookDialog = forwardRef< + HTMLDivElement, + { + onClose: () => void; + onConfirm: () => void; + workbookName: string; + } +>((properties, ref) => { + useEffect(() => { + const root = document.getElementById("root"); + if (root) { + root.style.filter = "blur(2px)"; + } + return () => { + const root = document.getElementById("root"); + if (root) { + root.style.filter = "none"; + } + }; + }, []); + + return ( + + + + + + Are you sure? + + The workbook '{properties.workbookName}' will be + permanently deleted. This action cannot be undone. + + + { + properties.onConfirm(); + properties.onClose(); + }} + > + Yes, delete workbook + + Cancel + + + + ); +}); + +DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog"; + +const DialogWrapper = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + display: flex; + flex-direction: column; + gap: 16px; + padding: 12px; + border-radius: 8px; + box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A; + max-width: 280px; + width: 100%; + z-index: 50; + font-family: "Inter", sans-serif; +`; + +const IconWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 36px; + height: 36px; + border-radius: 4px; + background-color: ${theme.palette.error.main}1A; + margin: 12px auto 0 auto; + color: ${theme.palette.error.main}; + svg { + width: 16px; + height: 16px; + } +`; + +const ContentWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + font-size: 14px; + word-break: break-word; +`; + +const Title = styled.h2` + margin: 0; + font-weight: 600; + font-size: inherit; + color: ${theme.palette.grey["900"]}; +`; + +const Body = styled.p` + margin: 0; + text-align: center; + color: ${theme.palette.grey["900"]}; + font-size: 12px; +`; + +const ButtonGroup = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 8px; + width: 100%; +`; + +const Button = styled.button` + cursor: pointer; + color: ${theme.palette.common.white}; + background-color: ${theme.palette.primary.main}; + padding: 0px 10px; + height: 36px; + line-height: 36px; + border-radius: 4px; + border: none; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + transition: background-color 150ms; + &:hover { + background-color: ${theme.palette.primary.dark}; + } +`; + +const DeleteButton = styled(Button)` + background-color: ${theme.palette.error.main}; + color: ${theme.palette.common.white}; + &:hover { + background-color: ${theme.palette.primary.dark}; + } +`; + +const CancelButton = styled(Button)` + background-color: ${theme.palette.grey["200"]}; + color: ${theme.palette.grey["700"]}; + &:hover { + background-color: ${theme.palette.grey["300"]}; + } +`;