Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pagination-component-added #6187

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+467 −0
Open

pagination-component-added #6187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,14 @@ const componentsData = [
url: "/projects/sistent/components/toggle-button",
src: "/toggle-button",
},
{
id: 14,
name: "Pagination",
description:
"Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information.",
url: "/projects/sistent/components/pagination",
src: "/pagination",
},
];

module.exports = { componentsData };
180 changes: 180 additions & 0 deletions src/sections/Projects/Sistent/components/pagination/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import React, { useState } from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { Pagination, SistentThemeProvider } from "@layer5/sistent";
import { SistentLayout } from "../../sistent-layout";
import { CodeBlock } from "../button/code-block";
import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
// Basic pagination
`
<Pagination
count={10}
page={1}
onChange={(event, page) => handleChange(page)}
/>
`,
// Pagination with size variants
`
<Pagination size="small" count={10} />
<Pagination size="medium" count={10} />
<Pagination size="large" count={10} />
`,
// Pagination with custom styling
`
<Pagination
count={10}
color="primary"
variant="outlined"
shape="rounded"
/>
`,
// Pagination with an outline
`
<Pagination
count={10}
variant="outlined"
color="secondary"
/>
`,
];

const PaginationCode = () => {
const { isDark } = useStyledDarkMode();
const location = useLocation();
const [currentPage, setCurrentPage] = useState(1);

const handlePageChange = (event, value) => {
setCurrentPage(value);
};

return (
<SistentLayout title="Pagination">
<div className="content">
<a id="Identity">
<h2>Pagination</h2>
</a>
<p>
The Pagination component helps users navigate through multiple pages
of content. It provides a clear interface for moving between pages and
understanding the current position within a larger dataset.
</p>
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/pagination"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/pagination")}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/pagination/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/pagination/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/pagination/code"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/pagination/code")
}
title="Code"
/>
</div>
<div className="main-content">
{/* Basic Pagination */}
<a id="Basic Pagination">
<h3>Basic Pagination</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Pagination
count={10}
page={currentPage}
onChange={handlePageChange}
/>
</SistentThemeProvider>
</div>
<CodeBlock name="basic-pagination" code={codes[0]} />
</div>

{/* Pagination Sizes */}
<a id="Sizes">
<h3>Pagination Sizes</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<Pagination size="small" count={10} />
<Pagination size="medium" count={10} />
<Pagination size="large" count={10} />
</div>
</SistentThemeProvider>
</div>
<CodeBlock name="pagination-sizes" code={codes[1]} />
</div>

{/* Custom Styling */}
<a id="Styling">
<h3>Custom Styling</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Pagination
count={10}
color="primary"
variant="outlined"
shape="rounded"
/>
</SistentThemeProvider>
</div>
<CodeBlock name="styled-pagination" code={codes[2]} />
</div>

{/* Pagination with Outline */}
<a id="Outline">
<h3>Pagination with Outline</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Pagination
count={10}
variant="outlined"
color="secondary"
/>
</SistentThemeProvider>
</div>
<CodeBlock name="pagination-outline" code={codes[3]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default PaginationCode;
111 changes: 111 additions & 0 deletions src/sections/Projects/Sistent/components/pagination/guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { Row } from "../../../../../reusecore/Layout";
import { SistentThemeProvider, Pagination } from "@layer5/sistent";
import { SistentLayout } from "../../sistent-layout";
import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const PaginationGuidance = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Pagination">
<div className="content">
<a id="Identity">
<h2>Pagination</h2>
</a>
<p>
The Pagination component helps users navigate through multiple pages
of content. It provides a clear interface for moving between pages and
understanding the current position within a larger dataset.
</p>

<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/pagination"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/pagination")}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/pagination/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/pagination/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/pagination/code"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/pagination/code")
}
title="Code"
/>
</div>

<div className="main-content">
<a id="Usage Guidelines">
<h2>Usage Guidelines</h2>
</a>

<h3>When to Use</h3>
<p>
Pagination should be used when displaying large datasets that need
to be broken into manageable chunks. It helps users navigate through
multiple pages of content and is beneficial when content needs to be
loaded incrementally to improve performance.
</p>

<h3>Best Practices</h3>
<p>
To ensure a smooth user experience, it’s important to keep page
sizes consistent throughout the interface. The current page number
and total pages should be displayed clearly. Adequate spacing
between page numbers should be ensured to improve readability. It’s
also crucial to provide clear visual feedback for the current page.
For large page ranges, consider using ellipsis (...) to represent
skipped pages.
</p>

<h3>Accessibility</h3>
<p>
To make pagination more accessible, ensure that ARIA labels are used
to identify the pagination controls. Keyboard navigation should be
properly supported to allow users to navigate through the pages
easily. It’s important to provide clear visual indicators for focus
states and maintain adequate color contrast for all states to ensure
readability.
</p>

<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Pagination
count={10}
defaultPage={1}
aria-label="Pagination navigation"
/>
</SistentThemeProvider>
</Row>
</div>
</div>
</SistentLayout>
);
};

export default PaginationGuidance;
Loading
Loading