Skip to content

Commit ba5a394

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
index.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent 94a7430 commit ba5a394

1 file changed

Lines changed: 199 additions & 0 deletions

File tree

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

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

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider, Chip, DesignIcon, MesheryFilterIcon } from "@sistent/sistent";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import { Row } from "../../../../../reusecore/Layout";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
11+
const SistentChip = () => {
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 are helpful elements that can be used to display selected options,
60+
filter content, or trigger actions. They provide a clear visual representation
61+
of discrete pieces of information and can be interactive or static depending
62+
on the use case.
63+
</p>
64+
<a id="Types">
65+
<h2>Types</h2>
66+
</a>
67+
<p>
68+
Different types of chips serve various purposes in the user interface,
69+
from displaying information to enabling user interaction.
70+
</p>
71+
<h3>Basic Chip</h3>
72+
<p>
73+
Basic chips display simple information and are typically non-interactive.
74+
They're useful for showing tags, categories, or labels.
75+
</p>
76+
<Row $Hcenter className="image-container">
77+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
78+
<Chip label="Basic Chip" />
79+
</SistentThemeProvider>
80+
</Row>
81+
<h3>Clickable Chip</h3>
82+
<p>
83+
Clickable chips respond to user interaction and can trigger actions
84+
when clicked. They're useful for navigation or performing specific operations.
85+
</p>
86+
<Row $Hcenter className="image-container">
87+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
88+
<Chip label="Clickable" clickable />
89+
</SistentThemeProvider>
90+
</Row>
91+
<h3>Deletable Chip</h3>
92+
<p>
93+
Deletable chips include a delete icon that allows users to remove them.
94+
They're commonly used for selected filters, tags, or form inputs.
95+
</p>
96+
<Row $Hcenter className="image-container">
97+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
98+
<Chip label="Deletable" color="primary"onDelete={() => {}} />
99+
</SistentThemeProvider>
100+
</Row>
101+
<a id="Variants">
102+
<h2>Variants</h2>
103+
</a>
104+
<p>
105+
Chips come in different visual styles to match various design needs
106+
and levels of emphasis.
107+
</p>
108+
<h3>Filled</h3>
109+
<p>
110+
Filled chips have a solid background color and are the default variant.
111+
They provide good contrast and visibility.
112+
</p>
113+
<Row $Hcenter className="image-container">
114+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
115+
<Chip label="Filled" variant="filled" />
116+
</SistentThemeProvider>
117+
</Row>
118+
<h3>Outlined</h3>
119+
<p>
120+
Outlined chips have a transparent background with a border.
121+
They're useful when you need a lighter visual treatment.
122+
</p>
123+
<Row $Hcenter className="image-container">
124+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
125+
<Chip label="Outlined" variant="outlined" />
126+
</SistentThemeProvider>
127+
</Row>
128+
<a id="Sizes">
129+
<h2>Sizes</h2>
130+
</a>
131+
<p>
132+
Chips are available in different sizes to accommodate various use cases
133+
and design requirements.
134+
</p>
135+
<h3>Small</h3>
136+
<p>
137+
Small chips are compact and work well in dense layouts or when space is limited.
138+
</p>
139+
<Row $Hcenter className="image-container">
140+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
141+
<Chip label="Small" size="small" />
142+
</SistentThemeProvider>
143+
</Row>
144+
<h3>Medium</h3>
145+
<p>
146+
Medium chips are the default size and work well in most situations.
147+
</p>
148+
<Row $Hcenter className="image-container">
149+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
150+
<Chip label="Medium" size="medium" />
151+
</SistentThemeProvider>
152+
</Row>
153+
<a id="Logo Chips">
154+
<h2>Logo Chips</h2>
155+
</a>
156+
<p>
157+
Logo chips combine icons with text labels to provide visual context
158+
and improve user recognition of different categories or actions.
159+
</p>
160+
<Row $Hcenter className="image-container">
161+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
162+
<Chip
163+
label="Design"
164+
variant="outlined"
165+
icon={<DesignIcon style={{ marginLeft: '8px', marginRight: '8px' }} />}
166+
style={{ paddingLeft: '4px', margin: '0 8px' }}
167+
/>
168+
<Chip
169+
label="WASM"
170+
variant="outlined"
171+
icon={<MesheryFilterIcon style={{ marginLeft: '8px', marginRight: '8px', width:'16px', height:'16px' }} />}
172+
style={{ paddingLeft: '4px', margin: '0 8px' }}
173+
/>
174+
</SistentThemeProvider>
175+
</Row>
176+
<a id="Colors">
177+
<h2>Colors</h2>
178+
</a>
179+
<p>
180+
Chips can use different colors to convey meaning, status, or to match
181+
your brand's color scheme.
182+
</p>
183+
<Row $Hcenter className="image-container">
184+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
185+
<Chip label="Primary" color="primary" style={{ margin: '0 5px' }} />
186+
<Chip label="Secondary" color="secondary" style={{ margin: '0 5px' }} />
187+
<Chip label="Success" color="success" style={{ margin: '0 5px' }} />
188+
<Chip label="Error" color="error" style={{ margin: '0 5px' }} />
189+
<Chip label="Warning" color="warning" style={{ margin: '0 5px' }} />
190+
<Chip label="Info" color="info" style={{ margin: '0 5px' }} />
191+
</SistentThemeProvider>
192+
</Row>
193+
</div>
194+
</div>
195+
</SistentLayout>
196+
);
197+
};
198+
199+
export default SistentChip;

0 commit comments

Comments
 (0)