Skip to content

Commit f033fef

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

1 file changed

Lines changed: 256 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/badge

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

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Badge, SistentThemeProvider, Avatar } from "@sistent/sistent";
5+
import { CodeBlock } from "../button/code-block";
6+
import MailIcon from "@mui/icons-material/Mail";
7+
import { SistentLayout } from "../../sistent-layout";
8+
9+
import TabButton from "../../../../../reusecore/Button";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
const codes = [
13+
` <SistentThemeProvider>
14+
<Badge badgeContent={4} color="primary">
15+
<MailIcon />
16+
</Badge>
17+
</SistentThemeProvider>`,
18+
` <SistentThemeProvider>
19+
<Badge variant="dot" color="secondary">
20+
<MailIcon />
21+
</Badge>
22+
</SistentThemeProvider>`,
23+
` <SistentThemeProvider>
24+
<Badge badgeContent={4} color="primary" />
25+
<Badge badgeContent={4} color="secondary" />
26+
<Badge badgeContent={4} color="error" />
27+
<Badge badgeContent={4} color="warning" />
28+
<Badge badgeContent={4} color="success" />
29+
</SistentThemeProvider>`,
30+
` <SistentThemeProvider>
31+
<Badge
32+
badgeContent={4}
33+
color="primary"
34+
anchorOrigin={{
35+
vertical: 'top',
36+
horizontal: 'right',
37+
}}
38+
>
39+
<MailIcon />
40+
</Badge>
41+
</SistentThemeProvider>`,
42+
` <SistentThemeProvider>
43+
<Avatar>
44+
<Badge
45+
overlap="circular"
46+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
47+
variant="dot"
48+
color="success"
49+
>
50+
U
51+
</Badge>
52+
</Avatar>
53+
</SistentThemeProvider>`,
54+
];
55+
56+
const BadgeCode = () => {
57+
const location = useLocation();
58+
const { isDark } = useStyledDarkMode();
59+
60+
return (
61+
<SistentLayout title="Badge">
62+
<div className="content">
63+
<a id="Identity">
64+
<h2>Badge</h2>
65+
</a>
66+
<p>
67+
A badge is a small piece of information that is used to convey a
68+
specific message or status. It is often used to provide additional
69+
context or information about an item, such as a notification count,
70+
status indicator, or label.
71+
</p>
72+
<div className="filterBtns">
73+
<TabButton
74+
className={
75+
location.pathname === "/projects/sistent/components/badge"
76+
? "active"
77+
: ""
78+
}
79+
onClick={() => navigate("/projects/sistent/components/badge")}
80+
title="Overview"
81+
/>
82+
<TabButton
83+
className={
84+
location.pathname ===
85+
"/projects/sistent/components/badge/guidance"
86+
? "active"
87+
: ""
88+
}
89+
onClick={() =>
90+
navigate("/projects/sistent/components/badge/guidance")
91+
}
92+
title="Guidance"
93+
/>
94+
<TabButton
95+
className={
96+
location.pathname === "/projects/sistent/components/badge/code"
97+
? "active"
98+
: ""
99+
}
100+
onClick={() => navigate("/projects/sistent/components/badge/code")}
101+
title="Code"
102+
/>
103+
</div>
104+
<div className="main-content">
105+
<p>
106+
Badges display counts, small information indicators, or status
107+
markers that are attached to other interface elements.
108+
</p>
109+
<a id="Basic Badge">
110+
<h2>Basic Badge</h2>
111+
</a>
112+
<p>
113+
Examples of badges containing text, primarily using the badgeContent
114+
prop.
115+
</p>
116+
<div className="showcase">
117+
<div className="items">
118+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
119+
<Badge badgeContent={4} color="primary">
120+
<MailIcon />
121+
</Badge>
122+
</SistentThemeProvider>
123+
</div>
124+
<CodeBlock name="basic-badge" code={codes[0]} />
125+
</div>
126+
<h3>Dot Badge</h3>
127+
<p>The dot badge shows a small dot indicator without any content.</p>
128+
<div className="showcase">
129+
<div className="items">
130+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
131+
<Badge variant="dot" color="secondary">
132+
<MailIcon />
133+
</Badge>
134+
</SistentThemeProvider>
135+
</div>
136+
<CodeBlock name="dot-badge" code={codes[1]} />
137+
</div>
138+
<h3>Badge Colors</h3>
139+
<p>Use the color prop to apply theme palette colors to badges.</p>
140+
<div className="showcase">
141+
<div className="items">
142+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
143+
<div
144+
style={{
145+
display: "flex",
146+
justifyContent: "center",
147+
gap: "20px",
148+
}}
149+
>
150+
<Badge badgeContent={4} color="primary">
151+
<MailIcon />
152+
</Badge>
153+
<Badge badgeContent={4} color="secondary">
154+
<MailIcon />
155+
</Badge>
156+
<Badge badgeContent={4} color="error">
157+
<MailIcon />
158+
</Badge>
159+
<Badge badgeContent={4} color="warning">
160+
<MailIcon />
161+
</Badge>
162+
<Badge badgeContent={4} color="success">
163+
<MailIcon />
164+
</Badge>
165+
</div>
166+
</SistentThemeProvider>
167+
</div>
168+
<CodeBlock name="badge-colors" code={codes[2]} />
169+
</div>
170+
<a id="Badge Position">
171+
<h2>Badge Position</h2>
172+
</a>
173+
<p>Use the anchorOrigin prop to change the position of the badge.</p>
174+
<div className="showcase">
175+
<div className="items">
176+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
177+
<div
178+
style={{
179+
display: "flex",
180+
justifyContent: "center",
181+
gap: "20px",
182+
}}
183+
>
184+
<Badge
185+
badgeContent={4}
186+
color="primary"
187+
anchorOrigin={{
188+
vertical: "top",
189+
horizontal: "right",
190+
}}
191+
>
192+
<MailIcon />
193+
</Badge>
194+
<Badge
195+
badgeContent={4}
196+
color="primary"
197+
anchorOrigin={{
198+
vertical: "top",
199+
horizontal: "left",
200+
}}
201+
>
202+
<MailIcon />
203+
</Badge>
204+
<Badge
205+
badgeContent={4}
206+
color="primary"
207+
anchorOrigin={{
208+
vertical: "bottom",
209+
horizontal: "right",
210+
}}
211+
>
212+
<MailIcon />
213+
</Badge>
214+
<Badge
215+
badgeContent={4}
216+
color="primary"
217+
anchorOrigin={{
218+
vertical: "bottom",
219+
horizontal: "left",
220+
}}
221+
>
222+
<MailIcon />
223+
</Badge>
224+
</div>
225+
</SistentThemeProvider>
226+
</div>
227+
<CodeBlock name="badge-position" code={codes[3]} />
228+
</div>
229+
<a id="Badge with Avatar">
230+
<h2>Badge with Avatar</h2>
231+
</a>
232+
<p>Badges can be used with avatars to show user status.</p>
233+
<div className="showcase">
234+
<div className="items">
235+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
236+
<Avatar>
237+
<Badge
238+
overlap="circular"
239+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
240+
variant="dot"
241+
color="success"
242+
>
243+
U
244+
</Badge>
245+
</Avatar>
246+
</SistentThemeProvider>
247+
</div>
248+
<CodeBlock name="badge-avatar" code={codes[4]} />
249+
</div>
250+
</div>
251+
</div>
252+
</SistentLayout>
253+
);
254+
};
255+
256+
export default BadgeCode;

0 commit comments

Comments
 (0)