Skip to content

Commit 4974037

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

1 file changed

Lines changed: 209 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/radiogroup

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import { useLocation } from "@reach/router";
2+
import { navigate } from "gatsby";
3+
import React from "react";
4+
5+
import { Container, SistentThemeProvider } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import { CodeBlock } from "../button/code-block";
8+
9+
import TabButton from "../../../../../reusecore/Button";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
import { RadioGroup, Radio, FormControlLabel } from "@layer5/sistent";
13+
14+
const codes = [
15+
`<RadioGroup value={value} onChange={handleChange}>
16+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
17+
<FormControlLabel value="Meshery" control={<Radio />} label="Meshery" />
18+
<FormControlLabel value="Kanvas" control={<Radio />} label="Kanvas" />
19+
</RadioGroup>`,
20+
`<RadioGroup value={selectedDisabledOption} onChange={handleDisabledChange}>
21+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
22+
<FormControlLabel value="Meshery-Cloud (Disabled)" control={<Radio />} label="Meshery-Cloud (Disabled)" disabled />
23+
<FormControlLabel value="Sistent Design System" control={<Radio />} label="Sistent Design System" />
24+
</RadioGroup>`,
25+
`<RadioGroup row value={selectedRowOption} onChange={handleRowChange}>
26+
<FormControlLabel value="Contributor" control={<Radio />} label="Contributor" />
27+
<FormControlLabel value="Community" control={<Radio />} label="Community Member" />
28+
<FormControlLabel value="Maintainer" control={<Radio />} label="Maintainer" />
29+
</RadioGroup>`,
30+
`<RadioGroup row value={selectedLabelOption} onChange={handleLabelChange}>
31+
<FormControlLabel value="end" control={<Radio />} label="End (Default)" labelPlacement="end" />
32+
<FormControlLabel value="top" control={<Radio />} label="Top" labelPlacement="top" />
33+
<FormControlLabel value="bottom" control={<Radio />} label="Bottom" labelPlacement="bottom" />
34+
<FormControlLabel value="start" control={<Radio />} label="Start" labelPlacement="start" />
35+
</RadioGroup>`
36+
];
37+
38+
const SistentRadioGroup = () => {
39+
const location = useLocation();
40+
const { isDark } = useStyledDarkMode();
41+
42+
const [value, setValue] = React.useState("Layer5");
43+
const handleChange = (event) => setValue(event.target.value);
44+
45+
const [selectedDisabledOption, setSelectedDisabledOption] = React.useState("Layer5");
46+
const handleDisabledChange = (event) => setSelectedDisabledOption(event.target.value);
47+
48+
const [selectedRowOption, setSelectedRowOption] = React.useState("Contributor");
49+
const handleRowChange = (event) => setSelectedRowOption(event.target.value);
50+
51+
const [selectedLabelOption, setSelectedLabelOption] = React.useState("end");
52+
const handleLabelChange = (event) => setSelectedLabelOption(event.target.value);
53+
54+
return (
55+
<SistentLayout title="RadioGroup">
56+
<div className="content">
57+
<a id="Identity">
58+
<h2>RadioGroup</h2>
59+
</a>
60+
<div className="filterBtns">
61+
<TabButton
62+
className={
63+
location.pathname === "/projects/sistent/components/radiogroup"
64+
? "active"
65+
: ""
66+
}
67+
onClick={() => navigate("/projects/sistent/components/radiogroup")}
68+
title="Overview"
69+
/>
70+
<TabButton
71+
className={
72+
location.pathname ===
73+
"/projects/sistent/components/radiogroup/guidance"
74+
? "active"
75+
: ""
76+
}
77+
onClick={() =>
78+
navigate("/projects/sistent/components/radiogroup/guidance")
79+
}
80+
title="Guidance"
81+
/>
82+
<TabButton
83+
className={
84+
location.pathname === "/projects/sistent/components/radiogroup/code"
85+
? "active"
86+
: ""
87+
}
88+
onClick={() =>
89+
navigate("/projects/sistent/components/radiogroup/code")
90+
}
91+
title="Code"
92+
/>
93+
</div>
94+
<div className="main-content">
95+
<p>
96+
The RadioGroup component lets users select one option from a set of
97+
choices. It ensures accessibility and ease of use.
98+
</p>
99+
<a id="Basic RadioGroup">
100+
<h2>Basic RadioGroup</h2>
101+
</a>
102+
<div className="showcase">
103+
<div className="items">
104+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
105+
<Container maxWidth="sm">
106+
<RadioGroup value={value} onChange={handleChange}>
107+
<FormControlLabel
108+
value="Layer5"
109+
control={<Radio />}
110+
label="Layer5"
111+
/>
112+
<FormControlLabel
113+
value="Meshery"
114+
control={<Radio />}
115+
label="Meshery"
116+
/>
117+
<FormControlLabel
118+
value="Kanvas"
119+
control={<Radio />}
120+
label="Kanvas"
121+
/>
122+
</RadioGroup>
123+
</Container>
124+
</SistentThemeProvider>
125+
</div>
126+
<CodeBlock name="radiogroup-example" code={codes[0]} />
127+
</div>
128+
129+
<a id="Disabled RadioGroup">
130+
<h2>Disabled Options</h2>
131+
</a>
132+
<div className="showcase">
133+
<div className="items">
134+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
135+
<Container maxWidth="sm">
136+
<RadioGroup value={selectedDisabledOption} onChange={handleDisabledChange}>
137+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
138+
<FormControlLabel value="Meshery-Cloud (Disabled)" control={<Radio />} label="Meshery-Cloud (Disabled)" disabled />
139+
<FormControlLabel value="Sistent Design System" control={<Radio />} label="Sistent Design System" />
140+
</RadioGroup>
141+
</Container>
142+
</SistentThemeProvider>
143+
</div>
144+
<CodeBlock name="radiogroup-disabled" code={codes[1]} />
145+
</div>
146+
147+
<a id="Row RadioGroup">
148+
<h2>Row Layout</h2>
149+
</a>
150+
<div className="showcase">
151+
<div className="items">
152+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
153+
<Container maxWidth="sm">
154+
<RadioGroup row value={selectedRowOption} onChange={handleRowChange}>
155+
<FormControlLabel value="Contributor" control={<Radio />} label="Contributor" />
156+
<FormControlLabel value="Community" control={<Radio />} label="Community Member" />
157+
<FormControlLabel value="Maintainer" control={<Radio />} label="Maintainer" />
158+
</RadioGroup>
159+
</Container>
160+
</SistentThemeProvider>
161+
</div>
162+
<CodeBlock name="radiogroup-row" code={codes[2]} />
163+
</div>
164+
165+
<a id="LabelPlacement RadioGroup">
166+
<h2>Label Placement</h2>
167+
</a>
168+
<div className="showcase">
169+
<div className="items">
170+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
171+
<Container maxWidth="sm">
172+
<RadioGroup row value={selectedLabelOption} onChange={handleLabelChange}>
173+
<FormControlLabel
174+
value="end"
175+
control={<Radio />}
176+
label="End (Default)"
177+
labelPlacement="end"
178+
/>
179+
<FormControlLabel
180+
value="top"
181+
control={<Radio />}
182+
label="Top"
183+
labelPlacement="top"
184+
/>
185+
<FormControlLabel
186+
value="bottom"
187+
control={<Radio />}
188+
label="Bottom"
189+
labelPlacement="bottom"
190+
/>
191+
<FormControlLabel
192+
value="start"
193+
control={<Radio />}
194+
label="Start"
195+
labelPlacement="start"
196+
/>
197+
</RadioGroup>
198+
</Container>
199+
</SistentThemeProvider>
200+
</div>
201+
<CodeBlock name="radiogroup-label-placement" code={codes[3]} />
202+
</div>
203+
</div>
204+
</div>
205+
</SistentLayout>
206+
);
207+
};
208+
209+
export default SistentRadioGroup;

0 commit comments

Comments
 (0)