Skip to content

Commit eca44ab

Browse files
SplinterSwordSplinterSword
committed
Added Collapse Sistent Components Docs
Signed-off-by: SplinterSword <sparshj2003@gmail.com>
1 parent 065d0ba commit eca44ab

3 files changed

Lines changed: 218 additions & 218 deletions

File tree

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

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@ const collapseExamples = [
1717
const [expanded, setExpanded] = useState(false);
1818
return (
1919
<>
20-
<Button
21-
variant="contained"
20+
<Button
21+
variant="contained"
2222
onClick={() => setExpanded(!expanded)}
23-
style={{ marginBottom: '1rem' }}
23+
style={{ marginBottom: "1rem" }}
2424
>
25-
{expanded ? 'Collapse' : 'Expand'}
25+
{expanded ? "Collapse" : "Expand"}
2626
</Button>
2727
<Collapse in={expanded}>
28-
<div style={{
29-
padding: '1rem',
30-
border: '1px solid #ddd',
31-
borderRadius: '4px',
32-
backgroundColor: isDark ? '#333' : '#f5f5f5'
28+
<div style={{
29+
padding: "1rem",
30+
border: "1px solid #ddd",
31+
borderRadius: "4px",
32+
backgroundColor: isDark ? "#333" : "#f5f5f5"
3333
}}>
3434
This content will be collapsed/expanded with a smooth animation.
3535
</div>
@@ -65,19 +65,19 @@ function BasicCollapse() {
6565
const [expanded, setExpanded] = useState(true);
6666
return (
6767
<>
68-
<Button
69-
variant="outlined"
68+
<Button
69+
variant="outlined"
7070
onClick={() => setExpanded(!expanded)}
71-
style={{ marginBottom: '1rem' }}
71+
style={{ marginBottom: "1rem" }}
7272
>
73-
{expanded ? 'Collapse' : 'Expand'}
73+
{expanded ? "Collapse" : "Expand"}
7474
</Button>
7575
<Collapse in={expanded}>
76-
<div style={{
77-
padding: '1rem',
78-
border: '1px solid #ddd',
79-
borderRadius: '4px',
80-
backgroundColor: isDark ? '#333' : '#f5f5f5'
76+
<div style={{
77+
padding: "1rem",
78+
border: "1px solid #ddd",
79+
borderRadius: "4px",
80+
backgroundColor: isDark ? "#333" : "#f5f5f5"
8181
}}>
8282
This content is expanded by default. Click the button to collapse it.
8383
</div>
@@ -108,19 +108,19 @@ function BasicCollapse() {
108108
const [expanded, setExpanded] = useState(false);
109109
return (
110110
<>
111-
<Button
112-
variant="text"
111+
<Button
112+
variant="text"
113113
onClick={() => setExpanded(!expanded)}
114-
style={{ marginBottom: '1rem' }}
114+
style={{ marginBottom: "1rem" }}
115115
>
116-
{expanded ? 'Collapse (unmounts content)' : 'Expand (mounts content)'}
116+
{expanded ? "Collapse (unmounts content)" : "Expand (mounts content)"}
117117
</Button>
118118
<Collapse in={expanded} unmountOnExit>
119-
<div style={{
120-
padding: '1rem',
121-
border: '1px solid #ddd',
122-
borderRadius: '4px',
123-
backgroundColor: isDark ? '#333' : '#f5f5f5'
119+
<div style={{
120+
padding: "1rem",
121+
border: "1px solid #ddd",
122+
borderRadius: "4px",
123+
backgroundColor: isDark ? "#333" : "#f5f5f5"
124124
}}>
125125
This content will be unmounted when collapsed (check the React DevTools).
126126
</div>
@@ -151,23 +151,23 @@ function BasicCollapse() {
151151
const [expanded, setExpanded] = useState(false);
152152
return (
153153
<>
154-
<Button
155-
variant="contained"
154+
<Button
155+
variant="contained"
156156
onClick={() => setExpanded(!expanded)}
157-
style={{ marginBottom: '1rem' }}
157+
style={{ marginBottom: "1rem" }}
158158
>
159-
{expanded ? 'Fast Collapse' : 'Slow Expand'}
159+
{expanded ? "Fast Collapse" : "Slow Expand"}
160160
</Button>
161-
<Collapse
162-
in={expanded}
161+
<Collapse
162+
in={expanded}
163163
timeout={expanded ? 1000 : 300} // Slower when expanding, faster when collapsing
164164
easing={expanded ? "cubic-bezier(0.4, 0, 0.2, 1)" : "ease-out"}
165165
>
166-
<div style={{
167-
padding: '1rem',
168-
border: '1px solid #ddd',
169-
borderRadius: '4px',
170-
backgroundColor: isDark ? '#333' : '#f5f5f5'
166+
<div style={{
167+
padding: "1rem",
168+
border: "1px solid #ddd",
169+
borderRadius: "4px",
170+
backgroundColor: isDark ? "#333" : "#f5f5f5"
171171
}}>
172172
Notice the different animation speeds when expanding vs collapsing.
173173
</div>
@@ -200,36 +200,36 @@ function BasicCollapse() {
200200
const CollapseComponent = () => {
201201
const { isDark } = useStyledDarkMode();
202202
const location = useLocation();
203-
203+
204204
// Determine active tab from URL
205205
const activeTab = useMemo(() => {
206206
const path = location.pathname;
207-
if (path.endsWith('/code')) return 'Code';
208-
if (path.endsWith('/guidance')) return 'Guidance';
209-
return 'Overview';
207+
if (path.endsWith("/code")) return "Code";
208+
if (path.endsWith("/guidance")) return "Guidance";
209+
return "Overview";
210210
}, [location.pathname]);
211211

212212
// Handle tab change
213213
const handleTabChange = (tab) => {
214214
const basePath = "/projects/sistent/components/collapse";
215-
const newPath = tab === 'Overview' ? basePath : `${basePath}/${tab.toLowerCase()}`;
215+
const newPath = tab === "Overview" ? basePath : `${basePath}/${tab.toLowerCase()}`;
216216
if (location.pathname !== newPath) {
217217
navigate(newPath);
218218
}
219219
};
220220

221221
return (
222222
<SistentLayout title="Collapse">
223-
<section className="content" style={{ padding: '2rem 0' }}>
224-
<a id="Layout" style={{ display: 'block', marginBottom: '1.5rem' }}>
225-
<h2 style={{ marginBottom: '0.5rem' }}>Collapse</h2>
223+
<section className="content" style={{ padding: "2rem 0" }}>
224+
<a id="Layout" style={{ display: "block", marginBottom: "1.5rem" }}>
225+
<h2 style={{ marginBottom: "0.5rem" }}>Collapse</h2>
226226
</a>
227-
<p style={{ fontSize: '1.1rem', lineHeight: '1.7', marginBottom: '2.5rem' }}>
228-
The Collapse component provides a smooth, animated way to show and hide content.
227+
<p style={{ fontSize: "1.1rem", lineHeight: "1.7", marginBottom: "2.5rem" }}>
228+
The Collapse component provides a smooth, animated way to show and hide content.
229229
Below are various examples demonstrating its capabilities and usage patterns.
230230
</p>
231-
232-
<div className="filterBtns" style={{ marginBottom: '2.5rem' }}>
231+
232+
<div className="filterBtns" style={{ marginBottom: "2.5rem" }}>
233233
{TABS.map((tab) => (
234234
<TabButton
235235
key={tab}
@@ -240,47 +240,47 @@ const CollapseComponent = () => {
240240
))}
241241
</div>
242242

243-
<div className="main-content" style={{ display: 'flex', flexDirection: 'column', gap: '3.5rem' }}>
243+
<div className="main-content" style={{ display: "flex", flexDirection: "column", gap: "3.5rem" }}>
244244
{collapseExamples.map((example) => (
245-
<div key={example.id} className="example-container" style={{
246-
marginBottom: '2.5rem',
247-
padding: '1.5rem',
248-
backgroundColor: isDark ? '#1e1e1e' : '#f9f9f9',
249-
borderRadius: '8px',
250-
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
245+
<div key={example.id} className="example-container" style={{
246+
marginBottom: "2.5rem",
247+
padding: "1.5rem",
248+
backgroundColor: isDark ? "#1e1e1e" : "#f9f9f9",
249+
borderRadius: "8px",
250+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
251251
}}>
252-
<h3 style={{
253-
fontSize: '1.5rem',
254-
marginBottom: '1rem',
255-
color: isDark ? '#fff' : '#333'
252+
<h3 style={{
253+
fontSize: "1.5rem",
254+
marginBottom: "1rem",
255+
color: isDark ? "#fff" : "#333"
256256
}}>
257257
{example.title}
258258
</h3>
259-
<p style={{
260-
fontSize: '1.05rem',
261-
lineHeight: '1.6',
262-
marginBottom: '1.5rem',
263-
color: isDark ? '#e0e0e0' : '#555'
259+
<p style={{
260+
fontSize: "1.05rem",
261+
lineHeight: "1.6",
262+
marginBottom: "1.5rem",
263+
color: isDark ? "#e0e0e0" : "#555"
264264
}}>
265265
{example.description}
266266
</p>
267-
<div className="example-preview" style={{
268-
padding: '1.5rem',
269-
border: `1px solid ${isDark ? '#444' : '#e0e0e0'}`,
270-
borderRadius: '6px',
271-
marginBottom: '1.5rem',
272-
backgroundColor: isDark ? '#2a2a2a' : '#fff',
273-
boxShadow: isDark ? '0 2px 4px rgba(0,0,0,0.2)' : '0 1px 3px rgba(0,0,0,0.05)'
267+
<div className="example-preview" style={{
268+
padding: "1.5rem",
269+
border: `1px solid ${isDark ? "#444" : "#e0e0e0"}`,
270+
borderRadius: "6px",
271+
marginBottom: "1.5rem",
272+
backgroundColor: isDark ? "#2a2a2a" : "#fff",
273+
boxShadow: isDark ? "0 2px 4px rgba(0,0,0,0.2)" : "0 1px 3px rgba(0,0,0,0.05)"
274274
}}>
275275
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
276276
{example.element({ isDark })}
277277
</SistentThemeProvider>
278278
</div>
279-
<div className="code-block-container" style={{
280-
marginTop: '1.5rem',
281-
borderRadius: '6px',
282-
overflow: 'hidden',
283-
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
279+
<div className="code-block-container" style={{
280+
marginTop: "1.5rem",
281+
borderRadius: "6px",
282+
overflow: "hidden",
283+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
284284
}}>
285285
<CodeBlock name={`collapse-${example.id}`} code={example.code} />
286286
</div>

0 commit comments

Comments
 (0)