Skip to content

Commit e885203

Browse files
Jaishree2310Jaishree2310
committed
feat: tab new component
1 parent 70a30d4 commit e885203

File tree

4 files changed

+270
-0
lines changed

4 files changed

+270
-0
lines changed

‎src/sections/Projects/Sistent/components/content.js

+8
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,14 @@ const componentsData = [
119119
url: "/projects/sistent/components/select",
120120
src: "/select",
121121
},
122+
{
123+
id: 16,
124+
name: "Tabs",
125+
description:
126+
"Tabs component allows users to switch between multiple views or sections within the same page, improving content organization and navigation.",
127+
url: "/projects/sistent/components/tabs",
128+
src: "/tabs",
129+
},
122130
];
123131

124132
module.exports = { componentsData };

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from "react";
2+
import { SistentThemeProvider, Tabs, Tab } from "@layer5/sistent";
3+
import { SistentLayout } from "../../sistent-layout";
4+
import { CodeBlock } from "../button/code-block";
5+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
6+
7+
const tabCodes = [
8+
`
9+
<Tabs value={0}>
10+
<Tab label="Tab One" />
11+
<Tab label="Tab Two" />
12+
<Tab label="Tab Three" />
13+
</Tabs>
14+
`,
15+
`
16+
<Tabs variant="fullWidth" value={0}>
17+
<Tab label="Full Width Tab" />
18+
</Tabs>
19+
<Tabs variant="scrollable" scrollButtons value={0}>
20+
<Tab label="Scrollable Tab" />
21+
</Tabs>
22+
`,
23+
`
24+
<Tabs value={0}>
25+
<Tab icon={<Icon name="home" />} label="Home" />
26+
<Tab icon={<Icon name="settings" />} label="Settings" />
27+
</Tabs>
28+
`
29+
];
30+
31+
const TabCodeExamples = () => {
32+
const { isDark } = useStyledDarkMode();
33+
34+
return (
35+
<SistentLayout title="Tab Code Examples">
36+
<div className="content">
37+
<h2>Tab Component Code</h2>
38+
<p>Here are different implementations of the Tab component.</p>
39+
40+
<h3>Basic Tabs</h3>
41+
<CodeBlock name="basic-tabs" code={tabCodes[0]} />
42+
43+
<h3>Tabs Variants</h3>
44+
<CodeBlock name="variant-tabs" code={tabCodes[1]} />
45+
46+
<h3>Tabs with Icons</h3>
47+
<CodeBlock name="tabs-with-icons" code={tabCodes[2]} />
48+
</div>
49+
</SistentLayout>
50+
);
51+
};
52+
53+
export default TabCodeExamples;

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

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Row } from "../../../../../reusecore/Layout";
5+
import { SistentThemeProvider } from "@layer5/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
8+
import TabButton from "../../../../../reusecore/Button";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
11+
const TabGuidance = () => {
12+
const location = useLocation();
13+
const { isDark } = useStyledDarkMode();
14+
15+
return (
16+
<SistentLayout title="Tab">
17+
<div className="content">
18+
<a id="Identity">
19+
<h2>Tab</h2>
20+
</a>
21+
<p>
22+
Tabs allow users to switch between different views or sections within the same page without navigating away.
23+
</p>
24+
<div className="filterBtns">
25+
<TabButton
26+
className={
27+
location.pathname === "/projects/sistent/components/tab"
28+
? "active"
29+
: ""
30+
}
31+
onClick={() => navigate("/projects/sistent/components/tab")}
32+
title="Overview"
33+
/>
34+
<TabButton
35+
className={
36+
location.pathname === "/projects/sistent/components/tab/guidance"
37+
? "active"
38+
: ""
39+
}
40+
onClick={() => navigate("/projects/sistent/components/tab/guidance")}
41+
title="Guidance"
42+
/>
43+
<TabButton
44+
className={
45+
location.pathname === "/projects/sistent/components/tab/code"
46+
? "active"
47+
: ""
48+
}
49+
onClick={() => navigate("/projects/sistent/components/tab/code")}
50+
title="Code"
51+
/>
52+
</div>
53+
<div className="main-content">
54+
<a id="Function">
55+
<h2>Function</h2>
56+
</a>
57+
<p>
58+
Tabs provide a way to organize and structure content efficiently, making it easier for users to navigate without reloading the page.
59+
</p>
60+
<h3>Primary Tab</h3>
61+
<p>
62+
The primary tab is the default selected tab that provides immediate access to the main content of a section.
63+
</p>
64+
<Row $Hcenter className="image-container">
65+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
66+
<TabButton title="Primary Tab" className="active" />
67+
</SistentThemeProvider>
68+
</Row>
69+
<h3>Secondary Tab</h3>
70+
<p>
71+
Secondary tabs help users explore additional options while maintaining a connection with the primary tab content.
72+
</p>
73+
<Row $Hcenter className="image-container">
74+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
75+
<TabButton title="Secondary Tab" />
76+
</SistentThemeProvider>
77+
</Row>
78+
<h3>Disabled Tab</h3>
79+
<p>
80+
A disabled tab indicates that the content is not accessible at the moment, preventing users from interacting with it.
81+
</p>
82+
<Row $Hcenter className="image-container">
83+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
84+
<TabButton title="Disabled Tab" disabled />
85+
</SistentThemeProvider>
86+
</Row>
87+
<a id="Labeling">
88+
<h2>Labeling</h2>
89+
</a>
90+
<p>
91+
Clear and concise labels should be used for tabs to provide users with an intuitive understanding of their purpose.
92+
</p>
93+
<h3>Font Weight</h3>
94+
<p>
95+
Text inside tabs should be legible and consistent in style, with emphasis where necessary to indicate active selection.
96+
</p>
97+
<h3>Content</h3>
98+
<p>
99+
Keep tab labels short and descriptive, ensuring that users can quickly understand the content within each section.
100+
</p>
101+
</div>
102+
</div>
103+
</SistentLayout>
104+
);
105+
};
106+
107+
export default TabGuidance;

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

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider } from "@layer5/sistent";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import { Col, Row } from "../../../../../reusecore/Layout";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
11+
const SistentTab = () => {
12+
const location = useLocation();
13+
const { isDark } = useStyledDarkMode();
14+
15+
return (
16+
<SistentLayout title="Tabs" >
17+
<div className="content">
18+
<a id="Identity">
19+
<h2>Tabs</h2>
20+
</a>
21+
<p>
22+
Tabs help organize content by separating it into multiple views where only one is visible at a time.
23+
</p>
24+
<div className="filterTabs">
25+
<TabButton
26+
className={
27+
location.pathname === "/projects/sistent/components/tabs"
28+
? "active"
29+
: ""
30+
}
31+
onClick={() => navigate("/projects/sistent/components/tabs")}
32+
title="Overview"
33+
/>
34+
<TabButton
35+
className={
36+
location.pathname === "/projects/sistent/components/tabs/guidance"
37+
? "active"
38+
: ""
39+
}
40+
onClick={() => navigate("/projects/sistent/components/tabs/guidance")}
41+
title="Guidance"
42+
/>
43+
<TabButton
44+
className={
45+
location.pathname === "/projects/sistent/components/tabs/code"
46+
? "active"
47+
: ""
48+
}
49+
onClick={() => navigate("/projects/sistent/components/tabs/code")}
50+
title="Code"
51+
/>
52+
</div>
53+
<div className="main-content">
54+
<p>
55+
Tabs allow users to navigate between different sections within the same context, keeping the interface clean and organized.
56+
</p>
57+
<a id="Types">
58+
<h2>Types</h2>
59+
</a>
60+
<p>
61+
Different types of tabs exist to meet various use cases. Tabs can be structured based on their appearance and behavior.
62+
</p>
63+
<h3>Basic Tabs</h3>
64+
<p>
65+
Basic tabs are simple and only display content related to the selected tab.
66+
</p>
67+
<Row $Hcenter className="image-container">
68+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
69+
<TabButton title="Tab 1" className="active" />
70+
<TabButton title="Tab 2" />
71+
<TabButton title="Tab 3" />
72+
</SistentThemeProvider>
73+
</Row>
74+
<h3>Underlined Tabs</h3>
75+
<p>
76+
Underlined tabs feature an indicator below the active tab to signify selection.
77+
</p>
78+
<Row $Hcenter className="image-container">
79+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
80+
<TabButton title="Tab 1" className="active underline" />
81+
<TabButton title="Tab 2" className="underline" />
82+
<TabButton title="Tab 3" className="underline" />
83+
</SistentThemeProvider>
84+
</Row>
85+
<h3>Icon Tabs</h3>
86+
<p>
87+
Icon tabs combine icons with text labels to provide additional context.
88+
</p>
89+
<Row $Hcenter className="image-container">
90+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
91+
<TabButton title="Home" icon="home" className="active" />
92+
<TabButton title="Settings" icon="settings" />
93+
<TabButton title="Profile" icon="user" />
94+
</SistentThemeProvider>
95+
</Row>
96+
</div>
97+
</div>
98+
</SistentLayout>
99+
);
100+
};
101+
102+
export default SistentTab;

0 commit comments

Comments
 (0)