Skip to content

Commit b43e1fe

Browse files
mdkaifansari04mdkaifansari04
committed
feat: add sistent-divider-component
Signed-off-by: Mdkaif-123 <[email protected]>
1 parent e9cd676 commit b43e1fe

File tree

8 files changed

+822
-1
lines changed

8 files changed

+822
-1
lines changed

‎src/pages/projects/sistent/components/divider/code.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import { DividerCode } from "../../../../../sections/Projects/Sistent/components/divider/code";
3+
4+
const DividerCodePage = () => {
5+
return <DividerCode />;
6+
};
7+
8+
export default DividerCodePage;

‎src/pages/projects/sistent/components/divider/guidance.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import { DividerGuidance } from "../../../../../sections/Projects/Sistent/components/divider/guidance";
3+
4+
const DividerGuidancePage = () => {
5+
return <DividerGuidance />;
6+
};
7+
8+
export default DividerGuidancePage;

‎src/pages/projects/sistent/components/divider/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import SistentDivider from "../../../../../sections/Projects/Sistent/components/divider/index";
3+
4+
const SistentDividerPage = () => {
5+
return <SistentDivider />;
6+
};
7+
8+
export default SistentDividerPage;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const SistentButton = () => {
1313
const { isDark } = useStyledDarkMode();
1414

1515
return (
16-
<SistentLayout title="Button" >
16+
<SistentLayout title="Button">
1717
<div className="content">
1818
<a id="Identity">
1919
<h2>Button</h2>

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

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
import { useLocation } from "@reach/router";
2+
import { navigate } from "gatsby";
3+
import React from "react";
4+
5+
import {
6+
Box,
7+
Chip,
8+
Divider,
9+
List,
10+
ListItem,
11+
ListItemText,
12+
SistentThemeProvider,
13+
styled,
14+
} from "@layer5/sistent";
15+
16+
import TabButton from "../../../../../reusecore/Button";
17+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
18+
import { SistentLayout } from "../../sistent-layout";
19+
20+
import FormatBoldIcon from "@mui/icons-material/FormatBold";
21+
import FormatItalicIcon from "@mui/icons-material/FormatItalic";
22+
import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
23+
import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
24+
import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
25+
26+
import { CodeBlock } from "../button/code-block";
27+
28+
const style = {
29+
py: 0,
30+
width: "100%",
31+
maxWidth: 360,
32+
borderRadius: 2,
33+
border: "1px solid",
34+
borderColor: "divider",
35+
backgroundColor: "background.paper",
36+
};
37+
38+
const Root = styled("div")(({ theme }) => ({
39+
width: "100%",
40+
...theme.typography.body2,
41+
color: theme.palette.text.secondary,
42+
"& > :not(style) ~ :not(style)": {
43+
marginTop: theme.spacing(2),
44+
},
45+
}));
46+
47+
const content = (
48+
<p style={{ color: "white" }}>
49+
{"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
50+
</p>
51+
);
52+
53+
const codes = [
54+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
55+
<List sx={style}>
56+
<ListItem>
57+
<ListItemText primary="Full width variant below" />
58+
</ListItem>
59+
<Divider component="li" />
60+
<ListItem>
61+
<ListItemText primary="Inset variant below" />
62+
</ListItem>
63+
<Divider variant="inset" component="li" />
64+
<ListItem>
65+
<ListItemText primary="Middle variant below" />
66+
</ListItem>
67+
<Divider variant="middle" component="li" />
68+
<ListItem>
69+
<ListItemText primary="List item" />
70+
</ListItem>
71+
</List>
72+
</SistentThemeProvider>`,
73+
74+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
75+
<Box
76+
sx={{
77+
display: "inline-flex",
78+
alignItems: "center",
79+
border: "1px solid",
80+
borderColor: "divider",
81+
borderRadius: 2,
82+
bgcolor: "background.paper",
83+
color: "text.secondary",
84+
"& svg": {
85+
m: 1,
86+
},
87+
}}
88+
>
89+
<FormatBoldIcon />
90+
<Divider orientation="vertical" variant="middle" flexItem />
91+
<FormatItalicIcon />
92+
</Box>
93+
</SistentThemeProvider>
94+
`,
95+
`
96+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
97+
<Box
98+
sx={{
99+
display: "flex",
100+
alignItems: "center",
101+
border: "1px solid",
102+
borderColor: "divider",
103+
borderRadius: 1,
104+
bgcolor: "background.paper",
105+
color: "text.secondary",
106+
"& svg": {
107+
m: 1,
108+
},
109+
}}
110+
>
111+
<FormatAlignLeftIcon />
112+
<FormatAlignCenterIcon />
113+
<FormatAlignRightIcon />
114+
<Divider orientation="vertical" flexItem />
115+
<FormatBoldIcon />
116+
</Box>
117+
</SistentThemeProvider>
118+
`,
119+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
120+
<Root>
121+
{content}
122+
<Divider>CENTER</Divider>
123+
{content}
124+
<Divider textAlign="left">LEFT</Divider>
125+
{content}
126+
<Divider textAlign="right">RIGHT</Divider>
127+
{content}
128+
<Divider>
129+
<Chip label="Chip" size="small" />
130+
</Divider>
131+
{content}
132+
</Root>
133+
</SistentThemeProvider>`,
134+
];
135+
136+
export const DividerCode = () => {
137+
const location = useLocation();
138+
const { isDark } = useStyledDarkMode();
139+
140+
return (
141+
<SistentLayout title="Divider">
142+
<div className="content">
143+
<a id="Identity">
144+
<h2>Divider</h2>
145+
</a>
146+
<div className="filterBtns">
147+
<TabButton
148+
className={
149+
location.pathname === "/projects/sistent/components/divider"
150+
? "active"
151+
: ""
152+
}
153+
onClick={() => navigate("/projects/sistent/components/divider")}
154+
title="Overview"
155+
/>
156+
<TabButton
157+
className={
158+
location.pathname ===
159+
"/projects/sistent/components/divider/guidance"
160+
? "active"
161+
: ""
162+
}
163+
onClick={() =>
164+
navigate("/projects/sistent/components/divider/guidance")
165+
}
166+
title="Guidance"
167+
/>
168+
<TabButton
169+
className={
170+
location.pathname === "/projects/sistent/components/divider/code"
171+
? "active"
172+
: ""
173+
}
174+
onClick={() =>
175+
navigate("/projects/sistent/components/divider/code")
176+
}
177+
title="Code"
178+
/>
179+
</div>
180+
<div className="main-content">
181+
<p>
182+
The Divider component adds a subtle line to separate content
183+
sections, supporting horizontal/vertical orientation and
184+
customizable alignment for text or icons. Ideal for enhancing layout
185+
clarity.
186+
</p>
187+
<a id="Variant">
188+
<h2>Variant Example</h2>
189+
</a>
190+
<p>
191+
The Divider component supports three variants: fullWidth (default),
192+
inset, and middle.
193+
</p>
194+
<div className="showcase">
195+
<div className="items">
196+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
197+
<List sx={style}>
198+
<ListItem>
199+
<ListItemText primary="Full width variant below" />
200+
</ListItem>
201+
<Divider component="li" />
202+
<ListItem>
203+
<ListItemText primary="Inset variant below" />
204+
</ListItem>
205+
<Divider variant="inset" component="li" />
206+
<ListItem>
207+
<ListItemText primary="Middle variant below" />
208+
</ListItem>
209+
<Divider variant="middle" component="li" />
210+
<ListItem>
211+
<ListItemText primary="List item" />
212+
</ListItem>
213+
</List>
214+
</SistentThemeProvider>
215+
</div>
216+
<CodeBlock name="variant-example" code={codes[0]} />
217+
</div>
218+
<a id="Flex item">
219+
<h2>Flex Item Example</h2>
220+
</a>
221+
<p>
222+
The <code>flexItem</code> prop allows the Divider to function
223+
properly within a flex container, ensuring it aligns with other flex
224+
items seamlessly.
225+
</p>
226+
<div className="showcase">
227+
<div className="items">
228+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
229+
<Box
230+
sx={{
231+
display: "inline-flex",
232+
alignItems: "center",
233+
border: "1px solid",
234+
borderColor: "divider",
235+
borderRadius: 2,
236+
bgcolor: "background.paper",
237+
color: "text.secondary",
238+
"& svg": {
239+
m: 1,
240+
},
241+
}}
242+
>
243+
<FormatBoldIcon />
244+
<Divider orientation="vertical" variant="middle" flexItem />
245+
<FormatItalicIcon />
246+
</Box>
247+
</SistentThemeProvider>
248+
</div>
249+
<CodeBlock name="flex-example" code={codes[1]} />
250+
</div>
251+
<a id="Orientation">
252+
<h2>Orientation Example</h2>
253+
<p>
254+
The Divider component supports two orientations: horizontal and
255+
vertical. Each orientation serves different layout needs and
256+
enhances the visual structure of your content.
257+
</p>
258+
</a>
259+
<div className="showcase">
260+
<div className="items">
261+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
262+
<Box
263+
sx={{
264+
display: "flex",
265+
alignItems: "center",
266+
border: "1px solid",
267+
borderColor: "divider",
268+
borderRadius: 1,
269+
bgcolor: "background.paper",
270+
color: "text.secondary",
271+
"& svg": {
272+
m: 1,
273+
},
274+
}}
275+
>
276+
<FormatAlignLeftIcon />
277+
<FormatAlignCenterIcon />
278+
<FormatAlignRightIcon />
279+
<Divider orientation="vertical" flexItem />
280+
<FormatBoldIcon />
281+
</Box>
282+
</SistentThemeProvider>
283+
</div>
284+
<CodeBlock name="orientation-example" code={codes[2]} />
285+
</div>
286+
<a id="With children">
287+
<h2>With children Example</h2>
288+
<p>
289+
The Divider component supports two orientations: horizontal and
290+
vertical. Each orientation serves different layout needs and
291+
enhances the visual structure of your content.
292+
</p>
293+
</a>
294+
<div className="showcase">
295+
<div className="items">
296+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
297+
<Root>
298+
{content}
299+
<Divider>CENTER</Divider>
300+
{content}
301+
<Divider textAlign="left">LEFT</Divider>
302+
{content}
303+
<Divider textAlign="right">RIGHT</Divider>
304+
{content}
305+
<Divider>
306+
<Chip label="Chip" size="small" />
307+
</Divider>
308+
{content}
309+
</Root>
310+
</SistentThemeProvider>
311+
</div>
312+
<CodeBlock name="With-Children-example" code={codes[3]} />
313+
</div>
314+
</div>
315+
</div>
316+
</SistentLayout>
317+
);
318+
};

0 commit comments

Comments
 (0)