FIX: Refactor both dialogs to get common code
This commit is contained in:
Nicolás Hatcher
committed by
Nicolás Hatcher Andrés
Nicolás Hatcher Andrés
parent
dd29287c5a
commit
ed64716f0f
@@ -1,7 +1,12 @@
|
||||
import { Dialog, styled } from "@mui/material";
|
||||
import { House, TicketsPlane, X } from "lucide-react";
|
||||
import { X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import TemplatesListItem from "./TemplatesListItem";
|
||||
import TemplatesList, {
|
||||
Cross,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogFooterButton,
|
||||
} from "./TemplatesList";
|
||||
|
||||
function TemplatesDialog(properties: {
|
||||
onClose: () => void;
|
||||
@@ -19,7 +24,7 @@ function TemplatesDialog(properties: {
|
||||
|
||||
return (
|
||||
<DialogWrapper open={true} onClose={() => {}}>
|
||||
<DialogHeader>
|
||||
<DialogTemplateHeader>
|
||||
<span style={{ flexGrow: 2, marginLeft: 12 }}>Choose a template</span>
|
||||
<Cross
|
||||
style={{ marginRight: 12 }}
|
||||
@@ -30,26 +35,12 @@ function TemplatesDialog(properties: {
|
||||
>
|
||||
<X />
|
||||
</Cross>
|
||||
</DialogHeader>
|
||||
</DialogTemplateHeader>
|
||||
<DialogContent>
|
||||
<TemplatesListWrapper>
|
||||
<TemplatesListItem
|
||||
title="Mortgage calculator"
|
||||
description="Estimate payments, interest, and overall cost."
|
||||
icon={<House />}
|
||||
iconColor="#2F80ED"
|
||||
active={selectedTemplate === "mortgage_calculator"}
|
||||
onClick={() => handleTemplateSelect("mortgage_calculator")}
|
||||
/>
|
||||
<TemplatesListItem
|
||||
title="Travel expenses tracker"
|
||||
description="Track trip costs and stay on budget."
|
||||
icon={<TicketsPlane />}
|
||||
iconColor="#EB5757"
|
||||
active={selectedTemplate === "travel_expenses_tracker"}
|
||||
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
<TemplatesList
|
||||
selectedTemplate={selectedTemplate}
|
||||
handleTemplateSelect={handleTemplateSelect}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<DialogFooterButton
|
||||
@@ -62,84 +53,27 @@ function TemplatesDialog(properties: {
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
export 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;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
height: 44px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: Inter;
|
||||
`;
|
||||
|
||||
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 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;
|
||||
}
|
||||
const DialogTemplateHeader = styled("div")`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
height: 44px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: Inter;
|
||||
`;
|
||||
|
||||
export default TemplatesDialog;
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
import { Dialog, styled } from "@mui/material";
|
||||
import { House, TicketsPlane } from "lucide-react";
|
||||
import TemplatesListItem from "./TemplatesListItem";
|
||||
|
||||
function TemplatesList(props: {
|
||||
selectedTemplate: string;
|
||||
handleTemplateSelect: (templateId: string) => void;
|
||||
}) {
|
||||
const { selectedTemplate, handleTemplateSelect } = props;
|
||||
return (
|
||||
<TemplatesListWrapper>
|
||||
<TemplatesListItem
|
||||
title="Mortgage calculator"
|
||||
description="Estimate payments, interest, and overall cost."
|
||||
icon={<House />}
|
||||
iconColor="#2F80ED"
|
||||
active={selectedTemplate === "mortgage_calculator"}
|
||||
onClick={() => handleTemplateSelect("mortgage_calculator")}
|
||||
/>
|
||||
<TemplatesListItem
|
||||
title="Travel expenses tracker"
|
||||
description="Track trip costs and stay on budget."
|
||||
icon={<TicketsPlane />}
|
||||
iconColor="#EB5757"
|
||||
active={selectedTemplate === "travel_expenses_tracker"}
|
||||
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export 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);
|
||||
}
|
||||
`;
|
||||
|
||||
export 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;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DialogContent = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
export const TemplatesListWrapper = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
`;
|
||||
|
||||
export const DialogFooter = styled("div")`
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
export 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 TemplatesDialog;
|
||||
export default TemplatesList;
|
||||
@@ -1,9 +1,18 @@
|
||||
import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
|
||||
import { Dialog, styled } from "@mui/material";
|
||||
import { House, Table, TicketsPlane, X } from "lucide-react";
|
||||
import { styled } from "@mui/material";
|
||||
import { Table, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import TemplatesListItem from "./TemplatesListItem";
|
||||
|
||||
import TemplatesList, {
|
||||
Cross,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogFooterButton,
|
||||
DialogWrapper,
|
||||
TemplatesListWrapper,
|
||||
} from "./TemplatesList";
|
||||
|
||||
function WelcomeDialog(properties: {
|
||||
onClose: () => void;
|
||||
onSelectTemplate: (templateId: string) => void;
|
||||
@@ -20,7 +29,7 @@ function WelcomeDialog(properties: {
|
||||
|
||||
return (
|
||||
<DialogWrapper open={true} onClose={() => {}}>
|
||||
<DialogHeader>
|
||||
<DialogWelcomeHeader>
|
||||
<DialogHeaderTitleWrapper>
|
||||
<DialogHeaderLogoWrapper>
|
||||
<IronCalcIcon />
|
||||
@@ -38,7 +47,7 @@ function WelcomeDialog(properties: {
|
||||
>
|
||||
<X />
|
||||
</Cross>
|
||||
</DialogHeader>
|
||||
</DialogWelcomeHeader>
|
||||
<DialogContent>
|
||||
<ListTitle>New</ListTitle>
|
||||
<TemplatesListWrapper>
|
||||
@@ -52,24 +61,10 @@ function WelcomeDialog(properties: {
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
<ListTitle>Templates</ListTitle>
|
||||
<TemplatesListWrapper>
|
||||
<TemplatesListItem
|
||||
title="Mortgage calculator"
|
||||
description="Estimate payments, interest, and overall cost."
|
||||
icon={<House />}
|
||||
iconColor="#2F80ED"
|
||||
active={selectedTemplate === "mortgage_calculator"}
|
||||
onClick={() => handleTemplateSelect("mortgage_calculator")}
|
||||
/>
|
||||
<TemplatesListItem
|
||||
title="Travel expenses tracker"
|
||||
description="Track trip costs and stay on budget."
|
||||
icon={<TicketsPlane />}
|
||||
iconColor="#EB5757"
|
||||
active={selectedTemplate === "travel_expenses_tracker"}
|
||||
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
|
||||
/>
|
||||
</TemplatesListWrapper>
|
||||
<TemplatesList
|
||||
selectedTemplate={selectedTemplate}
|
||||
handleTemplateSelect={handleTemplateSelect}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<DialogFooterButton
|
||||
@@ -82,20 +77,7 @@ function WelcomeDialog(properties: {
|
||||
);
|
||||
}
|
||||
|
||||
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")`
|
||||
const DialogWelcomeHeader = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@@ -131,81 +113,24 @@ const DialogHeaderLogoWrapper = styled("div")`
|
||||
justify-content: center;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
background-color: #F2994A;
|
||||
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;
|
||||
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user