Skip to content

Commit ae61e5e

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
code.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent ffc106c commit ae61e5e

1 file changed

Lines changed: 182 additions & 0 deletions

File tree

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

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { CustomizedStepper, useStepper, SistentThemeProvider, Box, Typography, Button } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import PersonIcon from "@mui/icons-material/Person";
9+
import SettingsIcon from "@mui/icons-material/Settings";
10+
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
11+
12+
import TabButton from "../../../../../reusecore/Button";
13+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
14+
15+
const StepExample = ({ title, content }) => (
16+
<Box sx={{ p: 2, textAlign: "center" }}>
17+
<Typography variant="h6">{title}</Typography>
18+
<Typography variant="body2" color="textSecondary">
19+
{content}
20+
</Typography>
21+
</Box>
22+
);
23+
24+
const codes = [
25+
`import { CustomizedStepper, useStepper, Button, Box } from '@sistent/sistent';
26+
27+
const {
28+
activeStep,
29+
handleNext,
30+
goBack,
31+
stepLabels,
32+
icons,
33+
activeStepComponent: ActiveStepComponent
34+
} = useStepper({ steps: [
35+
{ label: 'User Info', component: StepOne, icon: PersonIcon },
36+
{ label: 'Settings', component: StepTwo, icon: SettingsIcon },
37+
{ label: 'Complete', component: StepThree, icon: CheckCircleIcon }
38+
] });
39+
40+
return (
41+
<div>
42+
<CustomizedStepper stepLabels={stepLabels} activeStep={activeStep} icons={icons}>
43+
<ActiveStepComponent />
44+
</CustomizedStepper>
45+
46+
<Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
47+
<Button onClick={goBack} disabled={activeStep === 0}>Back</Button>
48+
<Button onClick={handleNext}>Next</Button>
49+
</Box>
50+
</div>
51+
);`
52+
];
53+
54+
const StepperCode = () => {
55+
const location = useLocation();
56+
const { isDark } = useStyledDarkMode();
57+
58+
const {
59+
activeStep,
60+
handleNext,
61+
goBack,
62+
stepLabels,
63+
icons,
64+
activeStepComponent: ActiveStepComponent
65+
} = useStepper({
66+
steps: [
67+
{
68+
label: "User Info",
69+
component: () => <StepExample title="User Information" content="Enter your personal details" />,
70+
icon: PersonIcon
71+
},
72+
{
73+
label: "Settings",
74+
component: () => <StepExample title="Account Settings" content="Configure your preferences" />,
75+
icon: SettingsIcon
76+
},
77+
{
78+
label: "Complete",
79+
component: () => <StepExample title="Setup Complete" content="Review and finish" />,
80+
icon: CheckCircleIcon
81+
}
82+
]
83+
});
84+
85+
return (
86+
<SistentLayout title="Stepper">
87+
<div className="content">
88+
<a id="Identity">
89+
<h2>Stepper</h2>
90+
</a>
91+
<p>
92+
Code examples for implementing the Stepper component.
93+
</p>
94+
<div className="filterBtns">
95+
<TabButton
96+
className={
97+
location.pathname === "/projects/sistent/components/stepper"
98+
? "active"
99+
: ""
100+
}
101+
onClick={() => navigate("/projects/sistent/components/stepper")}
102+
title="Overview"
103+
/>
104+
<TabButton
105+
className={
106+
location.pathname ===
107+
"/projects/sistent/components/stepper/guidance"
108+
? "active"
109+
: ""
110+
}
111+
onClick={() =>
112+
navigate("/projects/sistent/components/stepper/guidance")
113+
}
114+
title="Guidance"
115+
/>
116+
<TabButton
117+
className={
118+
location.pathname === "/projects/sistent/components/stepper/code"
119+
? "active"
120+
: ""
121+
}
122+
onClick={() => navigate("/projects/sistent/components/stepper/code")}
123+
title="Code"
124+
/>
125+
</div>
126+
<div className="main-content">
127+
<p>
128+
The Stepper component uses the <code>useStepper</code> hook for state management
129+
and the <code>CustomizedStepper</code> component for rendering.
130+
</p>
131+
132+
<a id="stepper-with-navigation">
133+
<h2>Stepper with Navigation</h2>
134+
</a>
135+
<p>
136+
Enhanced stepper with navigation controls for user interaction.
137+
</p>
138+
<div className="showcase">
139+
<div className="items">
140+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
141+
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
142+
<CustomizedStepper
143+
stepLabels={stepLabels}
144+
activeStep={activeStep}
145+
icons={icons}
146+
>
147+
<ActiveStepComponent />
148+
</CustomizedStepper>
149+
150+
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 2 }}>
151+
<Button
152+
onClick={goBack}
153+
disabled={activeStep === 0}
154+
variant="outlined"
155+
size="small"
156+
>
157+
Back
158+
</Button>
159+
<Typography variant="caption" color="textSecondary" sx={{ alignSelf: "center" }}>
160+
Step {activeStep + 1} of {stepLabels.length}
161+
</Typography>
162+
<Button
163+
onClick={handleNext}
164+
disabled={activeStep === stepLabels.length - 1}
165+
variant="contained"
166+
size="small"
167+
>
168+
{activeStep === stepLabels.length - 1 ? "Finish" : "Next"}
169+
</Button>
170+
</Box>
171+
</Box>
172+
</SistentThemeProvider>
173+
</div>
174+
<CodeBlock name="stepper-navigation" code={codes[0]} />
175+
</div>
176+
</div>
177+
</div>
178+
</SistentLayout>
179+
);
180+
};
181+
182+
export default StepperCode;

0 commit comments

Comments
 (0)