Skip to content

Commit dafa2a4

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Enhanced the code section for dialog component
Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
1 parent 4a7ca24 commit dafa2a4

1 file changed

Lines changed: 207 additions & 81 deletions

File tree

  • src/sections/Projects/Sistent/components/dialog

‎src/sections/Projects/Sistent/components/dialog/code.js‎

Lines changed: 207 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,90 @@ import {
88
DialogContent,
99
DialogActions,
1010
Button,
11-
SistentThemeProvider
11+
SistentThemeProvider,
12+
Input
1213
} from "@sistent/sistent";
1314

1415
import { SistentLayout } from "../../sistent-layout";
1516
import TabButton from "../../../../../reusecore/Button";
1617
import { CodeBlock } from "../button/code-block";
1718
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1819

19-
const dialogCodeExample = `
20-
const [open, setOpen] = useState(false);
20+
const codes = [
21+
`const [open, setOpen] = useState(false);
2122
2223
const handleOpen = () => setOpen(true);
2324
const handleClose = () => setOpen(false);
2425
2526
<Button onClick={handleOpen}>Open Dialog</Button>
2627
<Dialog open={open} onClose={handleClose}>
27-
<DialogTitle>Dialog Title</DialogTitle>
28-
<DialogContent>This is a dialog example.</DialogContent>
28+
<DialogTitle>Confirm Action</DialogTitle>
29+
<DialogContent>
30+
Do you want to proceed with this action?
31+
</DialogContent>
2932
<DialogActions>
3033
<Button onClick={handleClose}>Cancel</Button>
31-
<Button color="primary" onClick={handleClose}>Confirm</Button>
34+
<Button color="primary" onClick={handleClose}>
35+
Confirm
36+
</Button>
3237
</DialogActions>
33-
</Dialog>
34-
`;
38+
</Dialog>`,
39+
`const [openFull, setOpenFull] = useState(false);
40+
41+
<Button onClick={() => setOpenFull(true)}>
42+
Open Full-Screen Dialog
43+
</Button>
44+
<Dialog
45+
open={openFull}
46+
onClose={() => setOpenFull(false)}
47+
fullScreen
48+
maxWidth="lg"
49+
>
50+
<DialogTitle>Full-Screen Dialog</DialogTitle>
51+
<DialogContent>
52+
<p>
53+
This dialog stretches to full screen. Use it when the
54+
user's full attention is needed.
55+
</p>
56+
</DialogContent>
57+
<DialogActions>
58+
<Button onClick={() => setOpenFull(false)}>Cancel</Button>
59+
<Button color="primary" onClick={() => setOpenFull(false)}>
60+
Save
61+
</Button>
62+
</DialogActions>
63+
</Dialog>`,
64+
`const [openForm, setOpenForm] = useState(false);
65+
66+
<Button onClick={() => setOpenForm(true)}>
67+
Open Form Dialog
68+
</Button>
69+
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
70+
<DialogTitle>Subscribe</DialogTitle>
71+
<DialogContent>
72+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
73+
<Input
74+
label="Email Address"
75+
type="email"
76+
placeholder="you@example.com"
77+
required
78+
/>
79+
<Input
80+
label="Name"
81+
type="text"
82+
placeholder="John Doe"
83+
required
84+
/>
85+
</div>
86+
</DialogContent>
87+
<DialogActions>
88+
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
89+
<Button color="primary" onClick={() => setOpenForm(false)}>
90+
Subscribe
91+
</Button>
92+
</DialogActions>
93+
</Dialog>`
94+
];
3595

3696
const DialogCode = () => {
3797
const location = useLocation();
@@ -44,100 +104,166 @@ const DialogCode = () => {
44104
const handleClose = () => setOpen(false);
45105

46106
return (
47-
<SistentLayout title="Dialog Code Examples">
107+
<SistentLayout title="Dialog">
48108
<div className="content">
49-
<a id="Dialog Code">
50-
<h2>Dialog Code Implementation</h2>
109+
<a id="Identity">
110+
<h2>Dialog</h2>
51111
</a>
52112
<p>
53-
The code section demonstrates how to use the Dialog component programmatically. We define state variables
54-
to control its visibility and bind open/close handlers to button actions. This is the typical pattern when
55-
using modal components in React applications.
113+
Dialog components provide modal windows that focus user attention on specific tasks
114+
or information. They overlay the main content and require user interaction before
115+
returning to the underlying interface.
56116
</p>
57117

58118
<div className="filterBtns">
59119
<TabButton
60-
title="Overview"
61-
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
120+
className={
121+
location.pathname === "/projects/sistent/components/dialog"
122+
? "active"
123+
: ""
124+
}
62125
onClick={() => navigate("/projects/sistent/components/dialog")}
126+
title="Overview"
63127
/>
64128
<TabButton
65-
title="Guidance"
66-
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
129+
className={
130+
location.pathname === "/projects/sistent/components/dialog/guidance"
131+
? "active"
132+
: ""
133+
}
67134
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
135+
title="Guidance"
68136
/>
69137
<TabButton
70-
title="Code"
71-
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
138+
className={
139+
location.pathname === "/projects/sistent/components/dialog/code"
140+
? "active"
141+
: ""
142+
}
72143
onClick={() => navigate("/projects/sistent/components/dialog/code")}
144+
title="Code"
73145
/>
74146
</div>
75147

76148
<div className="main-content">
77-
<p>Here is a live example of the Dialog component in action:</p>
78-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
79-
<Button onClick={handleOpen}>Open Dialog</Button>
80-
<Dialog open={open} onClose={handleClose}>
81-
<DialogTitle>Confirm Action</DialogTitle>
82-
<DialogContent>Do you want to proceed with this action?</DialogContent>
83-
<DialogActions>
84-
<Button onClick={handleClose}>Cancel</Button>
85-
<Button color="primary" onClick={handleClose}>Confirm</Button>
86-
</DialogActions>
87-
</Dialog>
88-
</SistentThemeProvider>
89-
90-
<h3 style={{ marginTop: "2rem" }}>Code Snippet</h3>
91-
<CodeBlock name="dialog-basic" code={dialogCodeExample} />
92-
93-
{/* Full Screen Dialog */}
94-
<h3 style={{ marginTop: "3rem" }}>Full-Screen Dialog Example</h3>
95-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
96-
<Button onClick={() => setOpenFull(true)}>Open Full-Screen Dialog</Button>
97-
<Dialog
98-
open={openFull}
99-
onClose={() => setOpenFull(false)}
100-
style={{ width: "100%", height: "100vh", maxWidth: "none" }}
101-
>
102-
<DialogTitle>Full-Screen Dialog</DialogTitle>
103-
<DialogContent>
104-
<p>This dialog stretches to full screen. Use it when the user's full attention is needed.</p>
105-
</DialogContent>
106-
<DialogActions>
107-
<Button onClick={() => setOpenFull(false)}>Cancel</Button>
108-
<Button color="primary" onClick={() => setOpenFull(false)}>Save</Button>
109-
</DialogActions>
110-
</Dialog>
111-
</SistentThemeProvider>
112-
113-
{/* Form Inside Dialog */}
114-
<h3 style={{ marginTop: "3rem" }}>Dialog with Form Example</h3>
115-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
116-
<Button onClick={() => setOpenForm(true)}>Open Form Dialog</Button>
117-
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
118-
<DialogTitle>Subscribe</DialogTitle>
119-
<DialogContent>
120-
<form style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
121-
<label>
122-
Email Address:
123-
<input type="email" placeholder="you@example.com" style={{ width: "100%", padding: "0.5rem" }} />
124-
</label>
125-
<label>
126-
Name:
127-
<input type="text" placeholder="John Doe" style={{ width: "100%", padding: "0.5rem" }} />
128-
</label>
129-
</form>
130-
</DialogContent>
131-
<DialogActions>
132-
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
133-
<Button color="primary" onClick={() => setOpenForm(false)}>Subscribe</Button>
134-
</DialogActions>
135-
</Dialog>
136-
</SistentThemeProvider>
149+
<p>
150+
The <code>Dialog</code> component is essential for creating focused user experiences
151+
that require immediate attention. It provides a controlled way to present forms,
152+
confirmations, and detailed information without navigating away from the current context.
153+
</p>
154+
155+
<a id="Basic Dialog">
156+
<h2>Basic Dialog</h2>
157+
</a>
158+
<p>
159+
A simple modal dialog with title, content, and action buttons. This is the most
160+
common pattern for confirmations and simple interactions.
161+
</p>
162+
<div className="showcase">
163+
<div className="items">
164+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
165+
<Button onClick={handleOpen}>Open Dialog</Button>
166+
<Dialog open={open} onClose={handleClose}>
167+
<DialogTitle>Confirm Action</DialogTitle>
168+
<DialogContent>
169+
Do you want to proceed with this action?
170+
</DialogContent>
171+
<DialogActions>
172+
<Button onClick={handleClose}>Cancel</Button>
173+
<Button color="primary" onClick={handleClose}>
174+
Confirm
175+
</Button>
176+
</DialogActions>
177+
</Dialog>
178+
</SistentThemeProvider>
179+
</div>
180+
<CodeBlock name="dialog-basic" code={codes[0]} />
181+
</div>
182+
183+
<a id="Full Screen Dialog">
184+
<h2>Full-Screen Dialog</h2>
185+
</a>
186+
<p>
187+
Full-screen dialogs are useful for complex forms or when you need the user's
188+
complete attention. They take up the entire viewport and are ideal for mobile devices.
189+
</p>
190+
<div className="showcase">
191+
<div className="items">
192+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193+
<Button onClick={() => setOpenFull(true)}>
194+
Open Full-Screen Dialog
195+
</Button>
196+
<Dialog
197+
open={openFull}
198+
onClose={() => setOpenFull(false)}
199+
fullScreen
200+
maxWidth="lg"
201+
>
202+
<DialogTitle>Full-Screen Dialog</DialogTitle>
203+
<DialogContent>
204+
<p>
205+
This dialog stretches to full screen. Use it when the user's
206+
full attention is needed for complex tasks or on mobile devices.
207+
</p>
208+
</DialogContent>
209+
<DialogActions>
210+
<Button onClick={() => setOpenFull(false)}>Cancel</Button>
211+
<Button color="primary" onClick={() => setOpenFull(false)}>
212+
Save
213+
</Button>
214+
</DialogActions>
215+
</Dialog>
216+
</SistentThemeProvider>
217+
</div>
218+
<CodeBlock name="dialog-fullscreen" code={codes[1]} />
219+
</div>
220+
221+
<a id="Form Dialog">
222+
<h2>Dialog with Form</h2>
223+
</a>
224+
<p>
225+
Dialogs can contain forms for collecting user input. This pattern is common
226+
for creating, editing, or subscribing workflows that don't require a full page.
227+
</p>
228+
<div className="showcase">
229+
<div className="items">
230+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
231+
<Button onClick={() => setOpenForm(true)}>
232+
Open Form Dialog
233+
</Button>
234+
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
235+
<DialogTitle>Subscribe</DialogTitle>
236+
<DialogContent>
237+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem", minWidth: "300px" }}>
238+
<Input
239+
label="Email Address"
240+
type="email"
241+
placeholder="you@example.com"
242+
required
243+
/>
244+
<Input
245+
label="Name"
246+
type="text"
247+
placeholder="John Doe"
248+
required
249+
/>
250+
</div>
251+
</DialogContent>
252+
<DialogActions>
253+
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
254+
<Button color="primary" onClick={() => setOpenForm(false)}>
255+
Subscribe
256+
</Button>
257+
</DialogActions>
258+
</Dialog>
259+
</SistentThemeProvider>
260+
</div>
261+
<CodeBlock name="dialog-form" code={codes[2]} />
262+
</div>
137263
</div>
138264
</div>
139265
</SistentLayout>
140266
);
141267
};
142268

143-
export default DialogCode;
269+
export default DialogCode;

0 commit comments

Comments
 (0)