Skip to content

Commit bc8ad6a

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
Index.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent eca76b3 commit bc8ad6a

1 file changed

Lines changed: 162 additions & 0 deletions

File tree

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

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

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
6+
import {
7+
SistentThemeProvider,
8+
RadioGroup,
9+
Radio,
10+
FormControlLabel,
11+
} from "@sistent/sistent";
12+
import TabButton from "../../../../../reusecore/Button";
13+
import { SistentLayout } from "../../sistent-layout";
14+
import { Row } from "../../../../../reusecore/Layout";
15+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
16+
17+
18+
const SistentRadioGroup = () => {
19+
const location = useLocation();
20+
const { isDark } = useStyledDarkMode();
21+
22+
const [selectedBasicOption, setSelectedBasicOption] = React.useState("Layer5");
23+
const [selectedDisabledOption, setSelectedDisabledOption] = React.useState("Layer5");
24+
const [selectedRowOption, setSelectedRowOption] = React.useState("Layer5");
25+
const [selectedLabelOption, setSelectedLabelOption] = React.useState("end");
26+
27+
const handleBasicChange = (event) => setSelectedBasicOption(event.target.value);
28+
const handleDisabledChange = (event) => setSelectedDisabledOption(event.target.value);
29+
const handleRowChange = (event) => setSelectedRowOption(event.target.value);
30+
const handleLabelChange = (event) => setSelectedLabelOption(event.target.value);
31+
32+
return (
33+
<SistentLayout title="RadioGroup">
34+
<div className="content">
35+
<a id="Identity">
36+
<h2>RadioGroup</h2>
37+
</a>
38+
<p>
39+
The RadioGroup component allows users to select one option from a set
40+
of mutually exclusive choices. It ensures accessibility and
41+
consistency within the Sistent design system.
42+
</p>
43+
<div className="filterBtns">
44+
<TabButton
45+
className={
46+
location.pathname === "/projects/sistent/components/radiogroup"
47+
? "active"
48+
: ""
49+
}
50+
onClick={() => navigate("/projects/sistent/components/radiogroup")}
51+
title="Overview"
52+
/>
53+
<TabButton
54+
className={
55+
location.pathname ===
56+
"/projects/sistent/components/radiogroup/guidance"
57+
? "active"
58+
: ""
59+
}
60+
onClick={() =>
61+
navigate("/projects/sistent/components/radiogroup/guidance")
62+
}
63+
title="Guidance"
64+
/>
65+
<TabButton
66+
className={
67+
location.pathname === "/projects/sistent/components/radiogroup/code"
68+
? "active"
69+
: ""
70+
}
71+
onClick={() =>
72+
navigate("/projects/sistent/components/radiogroup/code")
73+
}
74+
title="Code"
75+
/>
76+
</div>
77+
<div className="main-content">
78+
<p>
79+
The RadioGroup component in React is used to present a set of
80+
mutually exclusive options, where only one option can be selected
81+
at a time. It is commonly used in forms and settings.
82+
</p>
83+
<a id="Usage">
84+
<h2>How to use</h2>
85+
</a>
86+
<p>
87+
The examples below demonstrate different ways to use the RadioGroup component.
88+
</p>
89+
<h3>Basic RadioGroup</h3>
90+
<p>Select one option from a simple vertical list.</p>
91+
<Row $Hcenter className="image-container">
92+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
93+
<RadioGroup value={selectedBasicOption} onChange={handleBasicChange}>
94+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
95+
<FormControlLabel value="Meshery" control={<Radio />} label="Meshery" />
96+
<FormControlLabel value="Kanvas" control={<Radio />} label="Kanvas" />
97+
</RadioGroup>
98+
</SistentThemeProvider>
99+
</Row>
100+
<h3>Disabled Options</h3>
101+
<p>One of the options is disabled and cannot be selected.</p>
102+
<Row $Hcenter className="image-container">
103+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
104+
<RadioGroup value={selectedDisabledOption} onChange={handleDisabledChange}>
105+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
106+
<FormControlLabel value="Meshery-Cloud (Disabled)" control={<Radio />} label="Meshery-Cloud (Disabled)" disabled />
107+
<FormControlLabel value="Sistent Design System" control={<Radio/>} label="Sistent Design System" />
108+
</RadioGroup>
109+
</SistentThemeProvider>
110+
</Row>
111+
<h3>Row Layout</h3>
112+
<p>Options are displayed in a horizontal row.</p>
113+
<Row $Hcenter className="image-container">
114+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
115+
<RadioGroup row value={selectedRowOption} onChange={handleRowChange}>
116+
<FormControlLabel value="Contributor" control={<Radio />} label="Contributor" />
117+
<FormControlLabel value="Community" control={<Radio />} label="Community Member" />
118+
<FormControlLabel value="Maintainer" control={<Radio />} label="Maintainer" />
119+
</RadioGroup>
120+
</SistentThemeProvider>
121+
</Row>
122+
123+
<h3>Label Placement</h3>
124+
<p>You can change the placement of the label with the <code>labelPlacement</code> prop.</p>
125+
<Row $Hcenter className="image-container">
126+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
127+
<RadioGroup row value={selectedLabelOption} onChange={handleLabelChange}>
128+
<FormControlLabel
129+
value="end"
130+
control={<Radio />}
131+
label="End (Default)"
132+
labelPlacement="end"
133+
/>
134+
<FormControlLabel
135+
value="top"
136+
control={<Radio />}
137+
label="Top"
138+
labelPlacement="top"
139+
/>
140+
<FormControlLabel
141+
value="bottom"
142+
control={<Radio />}
143+
label="Bottom"
144+
labelPlacement="bottom"
145+
/>
146+
<FormControlLabel
147+
value="start"
148+
control={<Radio />}
149+
label="Start"
150+
labelPlacement="start"
151+
/>
152+
</RadioGroup>
153+
</SistentThemeProvider>
154+
</Row>
155+
</div>
156+
</div>
157+
</SistentLayout>
158+
);
159+
};
160+
161+
162+
export default SistentRadioGroup;

0 commit comments

Comments
 (0)