Skip to content

Commit f771d58

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
index.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent 9d35e74 commit f771d58

1 file changed

Lines changed: 186 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/stepper

‎src/sections/Projects/Sistent/components/stepper/index.js‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider, CustomizedStepper, useStepper, Box, Typography } from "@sistent/sistent";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import { Col, Row } from "../../../../../reusecore/Layout";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
import PersonIcon from "@mui/icons-material/Person";
11+
import SettingsIcon from "@mui/icons-material/Settings";
12+
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
13+
14+
const StepOneDemo = () => (
15+
<Box sx={{ p: 2, textAlign: 'center' }}>
16+
<Typography variant="h6">User Information</Typography>
17+
<Typography variant="body2" color="textSecondary">
18+
Collect basic user details
19+
</Typography>
20+
</Box>
21+
);
22+
23+
const StepTwoDemo = () => (
24+
<Box sx={{ p: 2, textAlign: 'center' }}>
25+
<Typography variant="h6">Account Settings</Typography>
26+
<Typography variant="body2" color="textSecondary">
27+
Configure preferences
28+
</Typography>
29+
</Box>
30+
);
31+
32+
const StepThreeDemo = () => (
33+
<Box sx={{ p: 2, textAlign: 'center' }}>
34+
<Typography variant="h6">Complete Setup</Typography>
35+
<Typography variant="body2" color="textSecondary">
36+
Review and finish
37+
</Typography>
38+
</Box>
39+
);
40+
41+
const SistentStepper = () => {
42+
const location = useLocation();
43+
const { isDark } = useStyledDarkMode();
44+
45+
const {
46+
activeStep,
47+
handleNext,
48+
goBack,
49+
stepLabels,
50+
icons,
51+
activeStepComponent: ActiveStepComponent
52+
} = useStepper({
53+
steps: [
54+
{ label: 'User Info', component: StepOneDemo, icon: PersonIcon },
55+
{ label: 'Settings', component: StepTwoDemo, icon: SettingsIcon },
56+
{ label: 'Complete', component: StepThreeDemo, icon: CheckCircleIcon }
57+
]
58+
});
59+
60+
return (
61+
<SistentLayout title="Stepper">
62+
<div className="content">
63+
<a id="Identity">
64+
<h2>Stepper</h2>
65+
</a>
66+
<p>
67+
Steppers guide users through multi-step processes by breaking complex tasks
68+
into manageable, sequential steps with clear progress indication.
69+
</p>
70+
<div className="filterBtns">
71+
<TabButton
72+
className={
73+
location.pathname === "/projects/sistent/components/stepper"
74+
? "active"
75+
: ""
76+
}
77+
onClick={() => navigate("/projects/sistent/components/stepper")}
78+
title="Overview"
79+
/>
80+
<TabButton
81+
className={
82+
location.pathname ===
83+
"/projects/sistent/components/stepper/guidance"
84+
? "active"
85+
: ""
86+
}
87+
onClick={() =>
88+
navigate("/projects/sistent/components/stepper/guidance")
89+
}
90+
title="Guidance"
91+
/>
92+
<TabButton
93+
className={
94+
location.pathname === "/projects/sistent/components/stepper/code"
95+
? "active"
96+
: ""
97+
}
98+
onClick={() => navigate("/projects/sistent/components/stepper/code")}
99+
title="Code"
100+
/>
101+
</div>
102+
<div className="main-content">
103+
<p>
104+
Steppers are essential for breaking down complex workflows into digestible pieces.
105+
They provide clear visual feedback about progress and help users understand
106+
what's required at each stage of a process.
107+
</p>
108+
109+
<a id="Demo">
110+
<h2>Interactive Demo</h2>
111+
</a>
112+
<p>
113+
Experience how the stepper component works with this interactive example:
114+
</p>
115+
<Row $Hcenter className="image-container">
116+
<Col sm={12}>
117+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
118+
<CustomizedStepper
119+
stepLabels={stepLabels}
120+
activeStep={activeStep}
121+
icons={icons}
122+
>
123+
<ActiveStepComponent />
124+
</CustomizedStepper>
125+
126+
<Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 3 }}>
127+
<TabButton
128+
onClick={goBack}
129+
disabled={activeStep === 0}
130+
title="Previous"
131+
style={{
132+
opacity: activeStep === 0 ? 0.5 : 1,
133+
cursor: activeStep === 0 ? 'not-allowed' : 'pointer'
134+
}}
135+
/>
136+
<TabButton
137+
onClick={handleNext}
138+
disabled={activeStep === stepLabels.length - 1}
139+
title={activeStep === stepLabels.length - 1 ? 'Finish' : 'Next'}
140+
style={{
141+
opacity: activeStep === stepLabels.length - 1 ? 0.5 : 1,
142+
cursor: activeStep === stepLabels.length - 1 ? 'not-allowed' : 'pointer'
143+
}}
144+
/>
145+
</Box>
146+
</SistentThemeProvider>
147+
</Col>
148+
</Row>
149+
150+
<a id="Key Features">
151+
<h2>Key Features</h2>
152+
</a>
153+
<p>
154+
The Sistent Stepper component provides several powerful features:
155+
</p>
156+
157+
<h3>Linear Progress</h3>
158+
<p>
159+
Users complete steps in sequence, ensuring all required information
160+
is collected before proceeding to the next step.
161+
</p>
162+
163+
<h3>Visual Progress Indication</h3>
164+
<p>
165+
Clear visual feedback shows completed steps, current step, and remaining
166+
steps, helping users understand their progress.
167+
</p>
168+
169+
<h3>Customizable Icons</h3>
170+
<p>
171+
Each step can have a custom icon that represents its content or purpose,
172+
making the interface more intuitive and visually appealing.
173+
</p>
174+
175+
<h3>Responsive Design</h3>
176+
<p>
177+
The stepper adapts to different screen sizes, maintaining usability
178+
across desktop and mobile devices.
179+
</p>
180+
</div>
181+
</div>
182+
</SistentLayout>
183+
);
184+
};
185+
186+
export default SistentStepper;

0 commit comments

Comments
 (0)