Skip to content

Commit be6432e

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
guidance.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent a85940e commit be6432e

1 file changed

Lines changed: 144 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/chip

‎src/sections/Projects/Sistent/components/chip/guidance.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Row } from "../../../../../reusecore/Layout";
5+
import { Chip, SistentThemeProvider,DesignIcon ,MesheryFilterIcon } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
8+
import TabButton from "../../../../../reusecore/Button";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
11+
const ChipGuidance = () => {
12+
const location = useLocation();
13+
const { isDark } = useStyledDarkMode();
14+
15+
return (
16+
<SistentLayout title="Chip">
17+
<div className="content">
18+
<a id="Identity">
19+
<h2>Chip</h2>
20+
</a>
21+
<p>
22+
Chips are compact elements that represent an input, attribute, or action.
23+
They allow users to enter information, make selections, filter content, or trigger actions.
24+
</p>
25+
<div className="filterBtns">
26+
<TabButton
27+
className={
28+
location.pathname === "/projects/sistent/components/chip"
29+
? "active"
30+
: ""
31+
}
32+
onClick={() => navigate("/projects/sistent/components/chip")}
33+
title="Overview"
34+
/>
35+
<TabButton
36+
className={
37+
location.pathname ===
38+
"/projects/sistent/components/chip/guidance"
39+
? "active"
40+
: ""
41+
}
42+
onClick={() =>
43+
navigate("/projects/sistent/components/chip/guidance")
44+
}
45+
title="Guidance"
46+
/>
47+
<TabButton
48+
className={
49+
location.pathname === "/projects/sistent/components/chip/code"
50+
? "active"
51+
: ""
52+
}
53+
onClick={() => navigate("/projects/sistent/components/chip/code")}
54+
title="Code"
55+
/>
56+
</div>
57+
<div className="main-content">
58+
<p>
59+
Chips provide a compact way to display information and enable user
60+
interaction. They should be used thoughtfully to enhance the user
61+
experience without overwhelming the interface.
62+
</p>
63+
<a id="Usage">
64+
<h2>Usage</h2>
65+
</a>
66+
<p>
67+
Chips serve various purposes in user interfaces and can be applied
68+
in different contexts to improve usability and information display.
69+
</p>
70+
<h3>Filters</h3>
71+
<p>
72+
Chips are excellent for displaying active filters in search results,
73+
data tables, or content lists. They provide a clear visual indication
74+
of what filters are applied and allow easy removal.
75+
</p>
76+
<Row $Hcenter className="image-container">
77+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
78+
<Chip label="Active Filter" onDelete={() => {}} color="primary" style={{ margin: "0 8px" }} />
79+
</SistentThemeProvider>
80+
</Row>
81+
<h3>Tags and Categories</h3>
82+
<p>
83+
Use chips to display tags, categories, or labels associated with content.
84+
They help users quickly understand the nature or classification of items.
85+
</p>
86+
<Row $Hcenter className="image-container">
87+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
88+
<Chip label="React" variant="outlined" style={{ margin: "0 8px" }} />
89+
<Chip label="JavaScript" variant="outlined" style={{ margin: "0 8px" }} />
90+
<Chip label="Frontend" variant="outlined" style={{ margin: "0 8px" }} />
91+
</SistentThemeProvider>
92+
</Row>
93+
<h3>Logo Chip</h3>
94+
<p>
95+
Chips can display icons alongside text labels for enhanced visual identification.
96+
</p>
97+
<Row $Hcenter className="image-container">
98+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
99+
<Chip
100+
label="Design"
101+
variant="outlined"
102+
icon={<DesignIcon style={{ marginLeft: "8px", marginRight: "5px" }} />}
103+
style={{ paddingLeft: "4px", margin: "0 8px" }}
104+
/>
105+
<Chip
106+
label="WASM"
107+
variant="outlined"
108+
icon={<MesheryFilterIcon style={{ marginLeft: "8px", marginRight: "5px" ,width: "16px",height: "16px" }} />}
109+
style={{ paddingLeft: "4px" ,margin: "0 8px" }}
110+
/>
111+
</SistentThemeProvider>
112+
</Row>
113+
<h3>Status Indicators</h3>
114+
<p>
115+
Use colored chips to indicate status, priority, or state of items.
116+
The color should be meaningful and consistent with your design system.
117+
</p>
118+
<Row $Hcenter className="image-container">
119+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
120+
<Chip label="Active" color="success" style={{ margin: "0 8px" }} />
121+
<Chip label="Pending" color="warning" style={{ margin: "0 8px" }} />
122+
<Chip label="Error" color="error" style={{ margin: "0 8px" }} />
123+
</SistentThemeProvider>
124+
</Row>
125+
<a id="Best Practices">
126+
<h2>Best Practices</h2>
127+
</a>
128+
<ul>
129+
<li>Keep chips simple and easy to understand.</li>
130+
<li>Use short, clear labels for each chip.</li>
131+
<li>Only add icons or colors when they add real value or meaning.</li>
132+
<li>Group related chips together for better organization.</li>
133+
<li>Maintain consistent spacing and alignment between chips.</li>
134+
<li>Avoid cluttering the interface with too many chips or styles.</li>
135+
<li>Ensure interactive chips have clear hover, focus, and active states.</li>
136+
<li>Use colors meaningfully and consistently (e.g., green for success, red for errors).</li>
137+
</ul>
138+
</div>
139+
</div>
140+
</SistentLayout>
141+
);
142+
};
143+
144+
export default ChipGuidance;

0 commit comments

Comments
 (0)