Skip to content

Commit 9d76ba3

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

1 file changed

Lines changed: 255 additions & 0 deletions

File tree

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

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

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
/* eslint-disable linebreak-style */
2+
import React from "react";
3+
import { navigate } from "gatsby";
4+
import { useLocation } from "@reach/router";
5+
6+
import { SistentThemeProvider, Badge, Avatar } from "@sistent/sistent";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { SistentLayout } from "../../sistent-layout";
9+
import { Col, Row } from "../../../../../reusecore/Layout";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
import MailIcon from "@mui/icons-material/Mail";
12+
13+
const SistentBadge = () => {
14+
const location = useLocation();
15+
const { isDark } = useStyledDarkMode();
16+
17+
return (
18+
<SistentLayout title="Badge">
19+
<div className="content">
20+
<a id="Identity">
21+
<h2>Badge</h2>
22+
</a>
23+
<p>
24+
A badge is a small piece of information that is used to convey a
25+
specific message or status. It is often used to provide additional
26+
context or information about an item, such as a notification count,
27+
status indicator, or label.
28+
</p>
29+
<div className="filterBtns">
30+
<TabButton
31+
className={
32+
location.pathname === "/projects/sistent/components/badge"
33+
? "active"
34+
: ""
35+
}
36+
onClick={() => navigate("/projects/sistent/components/badge")}
37+
title="Overview"
38+
/>
39+
<TabButton
40+
className={
41+
location.pathname ===
42+
"/projects/sistent/components/badge/guidance"
43+
? "active"
44+
: ""
45+
}
46+
onClick={() =>
47+
navigate("/projects/sistent/components/badge/guidance")
48+
}
49+
title="Guidance"
50+
/>
51+
<TabButton
52+
className={
53+
location.pathname === "/projects/sistent/components/badge/code"
54+
? "active"
55+
: ""
56+
}
57+
onClick={() => navigate("/projects/sistent/components/badge/code")}
58+
title="Code"
59+
/>
60+
</div>
61+
<div className="main-content">
62+
<p>
63+
Badges are small, often circular or rectangular elements that can
64+
display a number, status, or label. They are typically used to draw
65+
attention to specific information or to indicate the status of an
66+
item. Badges can be used in various contexts, such as notifications,
67+
labels, or status indicators.
68+
</p>
69+
<a id="Types">
70+
<h2>Types</h2>
71+
</a>
72+
<p>
73+
Different types of badges serve different purposes in user
74+
interfaces. The visual distinction helps users quickly understand
75+
the context and importance of the information being presented.
76+
</p>
77+
<h3>Standard Badge</h3>
78+
<p>
79+
Standard badges display a small circular notification indicator.
80+
They are commonly used to show counts or statuses on icons, buttons,
81+
or other UI elements.
82+
</p>
83+
<Row $Hcenter className="image-container">
84+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
85+
<Badge badgeContent={4} color="primary">
86+
<MailIcon />
87+
</Badge>
88+
</SistentThemeProvider>
89+
</Row>
90+
<h3>Dot Badge</h3>
91+
<p>
92+
Dot badges are minimalist indicators that show a small dot rather
93+
than a number. They're useful when you just need to indicate the
94+
presence of notifications without specifying the count.
95+
</p>
96+
<Row $Hcenter className="image-container">
97+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
98+
<Badge variant="dot" color="secondary">
99+
<MailIcon />
100+
</Badge>
101+
</SistentThemeProvider>
102+
</Row>
103+
<h3>Status Badge</h3>
104+
<p>
105+
Status badges can be used to indicate the state of an item or
106+
component. They typically use different colors to represent
107+
different statuses such as online/offline, active/inactive, or
108+
success/error.
109+
</p>
110+
<Row $Hcenter className="image-container">
111+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
112+
<Avatar>
113+
<Badge
114+
overlap="circular"
115+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
116+
variant="dot"
117+
color="success"
118+
>
119+
U
120+
</Badge>
121+
</Avatar>
122+
</SistentThemeProvider>
123+
</Row>
124+
<a id="Colors">
125+
<h2>Colors</h2>
126+
</a>
127+
<p>
128+
Badges come in different colors to help convey specific meanings.
129+
The color choice should be consistent across your application to
130+
maintain a clear visual language for users.
131+
</p>
132+
<Row $Hcenter className="image-container">
133+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
134+
<Badge
135+
badgeContent={4}
136+
color="primary"
137+
style={{ margin: "0 10px" }}
138+
>
139+
<MailIcon />
140+
</Badge>
141+
<Badge
142+
badgeContent={4}
143+
color="secondary"
144+
style={{ margin: "0 10px" }}
145+
>
146+
<MailIcon />
147+
</Badge>
148+
<Badge
149+
badgeContent={4}
150+
color="error"
151+
style={{ margin: "0 10px" }}
152+
>
153+
<MailIcon />
154+
</Badge>
155+
<Badge
156+
badgeContent={4}
157+
color="warning"
158+
style={{ margin: "0 10px" }}
159+
>
160+
<MailIcon />
161+
</Badge>
162+
<Badge
163+
badgeContent={4}
164+
color="success"
165+
style={{ margin: "0 10px" }}
166+
>
167+
<MailIcon />
168+
</Badge>
169+
</SistentThemeProvider>
170+
</Row>
171+
<a id="Positioning">
172+
<h2>Positioning</h2>
173+
</a>
174+
<p>
175+
Badges can be positioned in different locations around their parent
176+
element. The default position is top-right, but they can be adjusted
177+
to appear at various anchor points based on design requirements.
178+
</p>
179+
<Row $Hcenter className="image-container">
180+
<Col sm={12}>
181+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
182+
<div
183+
style={{
184+
display: "flex",
185+
justifyContent: "center",
186+
gap: "20px",
187+
}}
188+
>
189+
<Badge
190+
badgeContent={4}
191+
color="primary"
192+
anchorOrigin={{
193+
vertical: "top",
194+
horizontal: "right",
195+
}}
196+
>
197+
<MailIcon />
198+
</Badge>
199+
<Badge
200+
badgeContent={4}
201+
color="primary"
202+
anchorOrigin={{
203+
vertical: "top",
204+
horizontal: "left",
205+
}}
206+
>
207+
<MailIcon />
208+
</Badge>
209+
<Badge
210+
badgeContent={4}
211+
color="primary"
212+
anchorOrigin={{
213+
vertical: "bottom",
214+
horizontal: "right",
215+
}}
216+
>
217+
<MailIcon />
218+
</Badge>
219+
<Badge
220+
badgeContent={4}
221+
color="primary"
222+
anchorOrigin={{
223+
vertical: "bottom",
224+
horizontal: "left",
225+
}}
226+
>
227+
<MailIcon />
228+
</Badge>
229+
</div>
230+
</SistentThemeProvider>
231+
</Col>
232+
</Row>
233+
<a id="Visibility">
234+
<h2>Visibility</h2>
235+
</a>
236+
<p>
237+
Badges can be shown or hidden based on their content or specific
238+
conditions. For example, a badge might only appear when there are
239+
unread notifications and disappear when all notifications have been
240+
viewed.
241+
</p>
242+
<Row $Hcenter className="image-container">
243+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
244+
<Badge badgeContent={0} color="primary" showZero>
245+
<MailIcon />
246+
</Badge>
247+
</SistentThemeProvider>
248+
</Row>
249+
</div>
250+
</div>
251+
</SistentLayout>
252+
);
253+
};
254+
255+
export default SistentBadge;

0 commit comments

Comments
 (0)