Skip to content

Commit

Permalink
add-pagination-component
Browse files Browse the repository at this point in the history 
Signed-off-by: eyeaadil <madil9227583@gmail.com>
  • Loading branch information
@eyeaadil
eyeaadil committed Jan 15, 2025
1 parent bcec762 commit c76183f
Show file tree
Hide file tree
Showing 4 changed files with 467 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
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
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
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

0 comments on commit c76183f

Please sign in to comment.