update: add a welcome dialog to the app
This commit is contained in:
Daniel Gonzalez Albo
committed by
Nicolás Hatcher Andrés
Nicolás Hatcher Andrés
parent
aa664a95a1
commit
81901ec717
@@ -0,0 +1,211 @@
|
||||
import { Dialog, styled } from "@mui/material";
|
||||
import { House, Table, TicketsPlane, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import TemplatesListItem from "./TemplatesListItem";
|
||||
import IronCalcIcon from "./ironcalc_icon_white.svg";
|
||||
|
||||
function WelcomeDialog(properties: {
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
|
||||
"blank",
|
||||
);
|
||||
|
||||
const handleClose = () => {
|
||||
properties.onClose();
|
||||
};
|
||||
|
||||
const handleTemplateSelect = (templateId: string) => {
|
||||
setSelectedTemplate(templateId);
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogWrapper open={true} onClose={() => {}}>
|
||||
<DialogHeader>
|
||||
<DialogHeaderTitleWrapper>
|
||||
<DialogHeaderLogoWrapper>
|
||||
<DialogHeaderLogo src={IronCalcIcon} />
|
||||
</DialogHeaderLogoWrapper>
|
||||
<DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
|
||||
<DialogHeaderTitleSubtitle>
|
||||
Start with a blank workbook or a ready-made template.
|
||||
</DialogHeaderTitleSubtitle>
|
||||
</DialogHeaderTitleWrapper>
|
||||
<Cross
|
||||
onClick={handleClose}
|
||||
title="Close Dialog"
|
||||
tabIndex={0}
|
||||
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
|
||||
>
|
||||
<X />
|
||||
</Cross>
|
||||
</DialogHeader>
|
||||
<DialogContent>
|
||||
<ListTitle>New</ListTitle>
|
||||
<TemplatesListWrapper>
|
||||
<TemplatesListItem
|
||||
title="Blank workbook"
|
||||
description="Create from scratch or upload your own file."
|
||||
icon={<Table />}
|
||||
iconColor="#F2994A"
|
||||
active={selectedTemplate === "blank"}
|
||||
onClick={() => handleTemplateSelect("blank")}
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
<ListTitle>Templates</ListTitle>
|
||||
<TemplatesListWrapper>
|
||||
<TemplatesListItem
|
||||
title="Mortgage calculator"
|
||||
description="Estimate payments, interest, and overall cost."
|
||||
icon={<House />}
|
||||
iconColor="#2F80ED"
|
||||
active={selectedTemplate === "mortgage"}
|
||||
onClick={() => handleTemplateSelect("mortgage")}
|
||||
/>
|
||||
<TemplatesListItem
|
||||
title="Travel expenses tracker"
|
||||
description="Track trip costs and stay on budget."
|
||||
icon={<TicketsPlane />}
|
||||
iconColor="#EB5757"
|
||||
active={selectedTemplate === "travel"}
|
||||
onClick={() => handleTemplateSelect("travel")}
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<DialogFooterButton>Create workbook</DialogFooterButton>
|
||||
</DialogFooter>
|
||||
</DialogWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const DialogWrapper = styled(Dialog)`
|
||||
font-family: Inter;
|
||||
.MuiDialog-paper {
|
||||
width: 440px;
|
||||
border-radius: 12px;
|
||||
margin: 16px;
|
||||
border: 1px solid #e0e0e0;;
|
||||
}
|
||||
.MuiBackdrop-root {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
`;
|
||||
|
||||
const DialogHeader = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
font-family: Inter;
|
||||
`;
|
||||
|
||||
const DialogHeaderTitleWrapper = styled("span")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 4px 0px;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const DialogHeaderTitle = styled("span")`
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
const DialogHeaderTitleSubtitle = styled("span")`
|
||||
font-size: 12px;
|
||||
color: #757575;
|
||||
`;
|
||||
|
||||
const DialogHeaderLogoWrapper = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
background-color: #F2994A;
|
||||
padding: 10px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transform: rotate(-8deg);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
`;
|
||||
|
||||
const DialogHeaderLogo = styled("img")`
|
||||
width: 18px;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const Cross = styled("div")`
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
`;
|
||||
|
||||
const DialogContent = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
const ListTitle = styled("div")`
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
`;
|
||||
|
||||
const TemplatesListWrapper = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
`;
|
||||
|
||||
const DialogFooter = styled("div")`
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
const DialogFooterButton = styled("button")`
|
||||
background-color: #F2994A;
|
||||
border: none;
|
||||
color: #FFF;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-family: Inter;
|
||||
&:hover {
|
||||
background-color: #D68742;
|
||||
}
|
||||
&:active {
|
||||
background-color: #D68742;
|
||||
}
|
||||
`;
|
||||
|
||||
export default WelcomeDialog;
|
||||
@@ -0,0 +1,7 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.8" d="M9.95898 8.08594C9.60893 8.35318 9.27389 8.64313 8.95898 8.95801C7.09126 10.8257 6.042 13.3586 6.04199 16H6.04102V7.91406C6.39142 7.64662 6.72781 7.35715 7.04297 7.04199C8.90157 5.18307 9.9492 2.6648 9.95898 0.0371094V8.08594Z" fill="white"/>
|
||||
<path opacity="0.8" d="M6.04102 7.91406C4.31493 9.23162 2.19571 9.95898 0 9.95898V6.04102C1.60208 6.04102 3.13861 5.40429 4.27148 4.27148C5.40436 3.13861 6.04101 1.60213 6.04102 0L6.04102 7.91406Z" fill="white"/>
|
||||
<path opacity="0.8" d="M9.95947 8.08594C11.6856 6.76838 13.8048 6.04102 16.0005 6.04102V9.95898C14.3984 9.95898 12.8619 10.5957 11.729 11.7285C10.5961 12.8614 9.95948 14.3979 9.95947 16L9.95947 8.08594Z" fill="white"/>
|
||||
<path d="M9.95898 0C9.95898 2.64126 8.90957 5.17429 7.04199 7.04199C6.727 7.35698 6.39119 7.64674 6.04102 7.91406L6.04102 0H9.95898Z" fill="white"/>
|
||||
<path d="M6.04102 16C6.04102 13.3587 7.09042 10.8257 8.95801 8.95801C9.273 8.64302 9.60881 8.35326 9.95898 8.08594V16H6.04102Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user