Skip to content

Commit a85940e

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

1 file changed

Lines changed: 206 additions & 0 deletions

File tree

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

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

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { Chip, SistentThemeProvider, DesignIcon } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
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+
<Chip label="Basic Chip" />
15+
</SistentThemeProvider>`,
16+
` <SistentThemeProvider>
17+
<Chip label="Clickable" clickable />
18+
</SistentThemeProvider>`,
19+
` <SistentThemeProvider>
20+
<Chip label="Deletable" onDelete={() => {}} />
21+
</SistentThemeProvider>`,
22+
` <SistentThemeProvider>
23+
<Chip label="Filled" variant="filled" />
24+
<Chip label="Outlined" variant="outlined" />
25+
</SistentThemeProvider>`,
26+
` <SistentThemeProvider>
27+
<Chip label="Small" size="small" />
28+
<Chip label="Medium" size="medium" />
29+
</SistentThemeProvider>`,
30+
` <SistentThemeProvider>
31+
<Chip label="Design" variant="outlined" icon={<DesignIcon />} />
32+
</SistentThemeProvider>`,
33+
` <SistentThemeProvider>
34+
<Chip label="Primary" color="primary" />
35+
<Chip label="Secondary" color="secondary" />
36+
<Chip label="Success" color="success" />
37+
<Chip label="Error" color="error" />
38+
</SistentThemeProvider>`,
39+
];
40+
41+
const ChipCode = () => {
42+
const location = useLocation();
43+
const { isDark } = useStyledDarkMode();
44+
45+
return (
46+
<SistentLayout title="Chip">
47+
<div className="content">
48+
<a id="Identity">
49+
<h2>Chip</h2>
50+
</a>
51+
<p>
52+
Chips are compact elements that represent an input, attribute, or action.
53+
They allow users to enter information, make selections, filter content, or trigger actions.
54+
</p>
55+
<div className="filterBtns">
56+
<TabButton
57+
className={
58+
location.pathname === "/projects/sistent/components/chip"
59+
? "active"
60+
: ""
61+
}
62+
onClick={() => navigate("/projects/sistent/components/chip")}
63+
title="Overview"
64+
/>
65+
<TabButton
66+
className={
67+
location.pathname ===
68+
"/projects/sistent/components/chip/guidance"
69+
? "active"
70+
: ""
71+
}
72+
onClick={() =>
73+
navigate("/projects/sistent/components/chip/guidance")
74+
}
75+
title="Guidance"
76+
/>
77+
<TabButton
78+
className={
79+
location.pathname === "/projects/sistent/components/chip/code"
80+
? "active"
81+
: ""
82+
}
83+
onClick={() => navigate("/projects/sistent/components/chip/code")}
84+
title="Code"
85+
/>
86+
</div>
87+
<div className="main-content">
88+
<p>
89+
Chips can be used to display information, enable user interaction,
90+
and provide a way to input or filter data.
91+
</p>
92+
<a id="Basic Chip">
93+
<h2>Basic Chip</h2>
94+
</a>
95+
<p>The chip comes in different types: Basic, Clickable, and Deletable.</p>
96+
<h3>Basic Chip</h3>
97+
<p>
98+
Basic chips display simple information and are typically non-interactive.
99+
They're useful for showing tags, categories, or labels.
100+
</p>
101+
<div className="showcase">
102+
<div className="items">
103+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
104+
<Chip label="Basic Chip" />
105+
</SistentThemeProvider>
106+
</div>
107+
<CodeBlock name="basic-chip" code={codes[0]} />
108+
</div>
109+
<h3>Clickable Chip</h3>
110+
<p>
111+
Clickable chips respond to user interaction and can trigger actions
112+
when clicked.
113+
</p>
114+
<div className="showcase">
115+
<div className="items">
116+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
117+
<Chip label="Clickable" clickable />
118+
</SistentThemeProvider>
119+
</div>
120+
<CodeBlock name="clickable-chip" code={codes[1]} />
121+
</div>
122+
<h3>Deletable Chip</h3>
123+
<p>
124+
Deletable chips include a delete icon that allows users to remove them.
125+
</p>
126+
<div className="showcase">
127+
<div className="items">
128+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
129+
<Chip label="Deletable" onDelete={() => {}} />
130+
</SistentThemeProvider>
131+
</div>
132+
<CodeBlock name="deletable-chip" code={codes[2]} />
133+
</div>
134+
<a id="Variants">
135+
<h2>Variants</h2>
136+
</a>
137+
<p>
138+
Chips come in different visual styles: filled and outlined.
139+
</p>
140+
<div className="showcase">
141+
<div className="items">
142+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
143+
<Chip label="Filled" variant="filled" />
144+
<Chip label="Outlined" variant="outlined" />
145+
</SistentThemeProvider>
146+
</div>
147+
<CodeBlock name="chip-variants" code={codes[3]} />
148+
</div>
149+
<a id="Sizes">
150+
<h2>Sizes</h2>
151+
</a>
152+
<p>
153+
Chips are available in different sizes: small and medium.
154+
</p>
155+
<div className="showcase">
156+
<div className="items">
157+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
158+
<Chip label="Small" size="small" />
159+
<Chip label="Medium" size="medium" />
160+
</SistentThemeProvider>
161+
</div>
162+
<CodeBlock name="chip-sizes" code={codes[4]} />
163+
</div>
164+
<a id="Logo Chip">
165+
<h2>Logo Chip</h2>
166+
</a>
167+
<p>
168+
Chips can display icons alongside text labels for enhanced visual identification.
169+
</p>
170+
<div className="showcase">
171+
<div className="items">
172+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
173+
<Chip
174+
label="Design"
175+
variant="outlined"
176+
icon={<DesignIcon style={{ marginLeft: "8px", marginRight: "8px" }} />}
177+
style={{ paddingLeft: "4px", margin: "0 8px" }}
178+
/>
179+
</SistentThemeProvider>
180+
</div>
181+
<CodeBlock name="logo-chip" code={codes[5]} />
182+
</div>
183+
<a id="Colors">
184+
<h2>Colors</h2>
185+
</a>
186+
<p>
187+
Chips can use different colors to convey meaning or status.
188+
</p>
189+
<div className="showcase">
190+
<div className="items">
191+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
192+
<Chip label="Primary" color="primary" />
193+
<Chip label="Secondary" color="secondary" />
194+
<Chip label="Success" color="success" />
195+
<Chip label="Error" color="error" />
196+
</SistentThemeProvider>
197+
</div>
198+
<CodeBlock name="chip-colors" code={codes[6]} />
199+
</div>
200+
</div>
201+
</div>
202+
</SistentLayout>
203+
);
204+
};
205+
206+
export default ChipCode;

0 commit comments

Comments
 (0)