Skip to content

Commit 5babdca

Browse files
vr-varadvr-varad
authored
Merge pull request #6756 from Rajesh-Nagarajan-11/add-toolbar-component
Added `Toolbar` component to Sistent components page
2 parents 31307c1 + 0359444 commit 5babdca

5 files changed

Lines changed: 746 additions & 4 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,11 @@ export const content = [
8484
{ id: 60, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
8585
{ id: 61, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
8686

87-
{ id: 62, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
88-
{ id: 63, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
89-
{ id: 64, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
87+
{ id: 62, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
88+
{ id: 63, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
89+
{ id: 64, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
90+
91+
{ id: 65, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
92+
{ id: 66, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
93+
{ id: 67, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
9094
];

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,15 @@ const componentsData = [
179179
description: "A badge is a small component that displays a number or status indicator, often used to show notifications or messages.",
180180
url: "/projects/sistent/components/badge",
181181
src: "/badge",
182-
}
182+
},
183+
{
184+
id: 24,
185+
name: "Toolbar",
186+
description:
187+
"The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section.",
188+
url: "/projects/sistent/components/toolbar",
189+
src: "/toolbar",
190+
},
183191
];
184192

185193
module.exports = { componentsData };

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Toolbar, SistentThemeProvider, Button } from "@sistent/sistent";
5+
import { CodeBlock } from "../button/code-block";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
import SearchIcon from "@mui/icons-material/Search";
10+
import HomeIcon from "@mui/icons-material/Home";
11+
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
12+
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
13+
import RefreshIcon from "@mui/icons-material/Refresh";
14+
import SettingsIcon from "@mui/icons-material/Settings";
15+
16+
const codes = [
17+
` <SistentThemeProvider>
18+
<Toolbar>
19+
<Button>Home</Button>
20+
<Button>Profile</Button>
21+
<Button>Settings</Button>
22+
</Toolbar>
23+
</SistentThemeProvider>`,
24+
` <SistentThemeProvider>
25+
<Toolbar fixed>
26+
<Button><ArrowBackIcon /></Button>
27+
<Button><ArrowForwardIcon /></Button>
28+
<Button><RefreshIcon /></Button>
29+
</Toolbar>
30+
/* Further content goes here. */
31+
</SistentThemeProvider>`,
32+
` <SistentThemeProvider>
33+
<Toolbar variant="dense">
34+
<Button><HomeIcon /></Button>
35+
<Button><SearchIcon /></Button>
36+
<Button><SettingsIcon /></Button>
37+
</Toolbar>
38+
</SistentThemeProvider>`,
39+
];
40+
41+
const ToolbarCode = () => {
42+
const location = useLocation();
43+
const { isDark } = useStyledDarkMode();
44+
45+
return (
46+
<SistentLayout title="Toolbar">
47+
<div className="content">
48+
<a id="Identity">
49+
<h2>Toolbar</h2>
50+
</a>
51+
<p>
52+
Toolbars provide quick access to commonly used actions grouped
53+
logically in a horizontal or vertical container.
54+
</p>
55+
<div className="filterBtns">
56+
<TabButton
57+
className={
58+
location.pathname === "/projects/sistent/components/toolbar"
59+
? "active"
60+
: ""
61+
}
62+
onClick={() => navigate("/projects/sistent/components/toolbar")}
63+
title="Overview"
64+
/>
65+
<TabButton
66+
className={
67+
location.pathname ===
68+
"/projects/sistent/components/toolbar/guidance"
69+
? "active"
70+
: ""
71+
}
72+
onClick={() =>
73+
navigate("/projects/sistent/components/toolbar/guidance")
74+
}
75+
title="Guidance"
76+
/>
77+
<TabButton
78+
className={
79+
location.pathname === "/projects/sistent/components/toolbar/code"
80+
? "active"
81+
: ""
82+
}
83+
onClick={() => navigate("/projects/sistent/components/toolbar/code")}
84+
title="Code"
85+
/>
86+
</div>
87+
<div className="main-content">
88+
<p>
89+
The following examples demonstrate how to implement various toolbar configurations
90+
in your application.
91+
</p>
92+
<a id="Basic Toolbar">
93+
<h2>Basic Toolbar</h2>
94+
</a>
95+
<p>
96+
The basic toolbar contains a set of buttons that represent key
97+
actions. Each button can perform a specific task when clicked.
98+
</p>
99+
<div className="showcase">
100+
<div className="items">
101+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
102+
<Toolbar>
103+
<Button>Home</Button>
104+
<Button>Profile</Button>
105+
<Button>Settings</Button>
106+
</Toolbar>
107+
</SistentThemeProvider>
108+
</div>
109+
<CodeBlock name="basic-toolbar" code={codes[0]} />
110+
</div>
111+
112+
<a id="Fixed Toolbar">
113+
<h2>Fixed Toolbar</h2>
114+
</a>
115+
<p>
116+
Fixed toolbars remain visible when scrolling and provide persistent
117+
access to navigation. Use the <code>fixed</code> prop to create a toolbar that
118+
stays in place during scrolling.
119+
</p>
120+
<div className="showcase">
121+
<div style={{ height: "300px", position: "relative", overflow: "hidden" }}>
122+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
123+
<Toolbar fixed>
124+
<Button><ArrowBackIcon /></Button>
125+
<Button><ArrowForwardIcon /></Button>
126+
<Button><RefreshIcon /></Button>
127+
</Toolbar>
128+
<div style={{ height: "240px", overflowY: "auto", padding: "16px" }}>
129+
<div style={{ height: "300px" }}>
130+
<p>Scrollable content goes here...</p>
131+
<p>More content...</p>
132+
<p>Even more content...</p>
133+
<p>Keep scrolling to see the toolbar stay fixed.</p>
134+
<p><strong>Toolbar in Sistent:</strong> Provides a consistent and accessible way to group key actions for users at the top of your application.</p>
135+
</div>
136+
</div>
137+
</SistentThemeProvider>
138+
</div>
139+
<CodeBlock name="fixed-toolbar" code={codes[1]} />
140+
</div>
141+
<a id="Dense Toolbar">
142+
<h2>Dense Toolbar</h2>
143+
</a>
144+
<p>
145+
Dense toolbars are more compact, saving vertical space. Use the <code>variant="dense"</code> prop
146+
to create a more compact toolbar.
147+
</p>
148+
<div className="showcase">
149+
<div className="items">
150+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
151+
<Toolbar variant="dense">
152+
<Button><HomeIcon /></Button>
153+
<Button><SearchIcon /></Button>
154+
<Button><SettingsIcon /></Button>
155+
</Toolbar>
156+
</SistentThemeProvider>
157+
</div>
158+
<CodeBlock name="dense-toolbar" code={codes[2]} />
159+
</div>
160+
161+
</div>
162+
</div>
163+
</SistentLayout>
164+
);
165+
};
166+
167+
export default ToolbarCode;

0 commit comments

Comments
 (0)