Adds pagination component

frontend/src/Components/Pagination/DrfPagination.module.scss

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 1rem;
+}

frontend/src/Components/Pagination/DrfPagination.stories.tsx

@@ -0,0 +1,94 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { DrfPagination } from './DrfPagination';
+
+export default {
+  title: 'Components/DRFPagination',
+  component: DrfPagination,
+  argTypes: {
+    currentPage: {
+      control: 'number',
+      description: 'Current active page',
+    },
+    totalItems: {
+      control: 'number',
+      description: 'Total number of items to paginate',
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Number of items per page',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom class for the pagination container',
+    },
+    itemClassName: {
+      control: 'text',
+      description: 'Custom class for individual pagination items',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A pagination component designed to work with Django Rest Framework pagination.',
+      },
+    },
+  },
+} as ComponentMeta<typeof DrfPagination>;
+
+// Template with state management
+const Template: ComponentStory<typeof DrfPagination> = (args) => {
+  const [currentPage, setCurrentPage] = useState(args.currentPage);
+
+  return <DrfPagination {...args} currentPage={currentPage} onPageChange={setCurrentPage} />;
+};
+
+// Basic usage
+export const Basic = Template.bind({});
+Basic.args = {
+  currentPage: 1,
+  totalItems: 100,
+  pageSize: 10,
+  buttonTheme: 'samf',
+  navButtonTheme: 'samf',
+  buttonDisplay: 'basic',
+  rounded: false,
+};
+Basic.parameters = {
+  docs: {
+    description: {
+      story: 'Basic pagination with default styling',
+    },
+  },
+};
+
+// Many pages example
+export const ManyPages = Template.bind({});
+ManyPages.args = {
+  ...Basic.args,
+  totalItems: 2500,
+  currentPage: 7,
+};
+ManyPages.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with many pages showing ellipsis',
+    },
+  },
+};
+
+// Minimal pages example
+export const MinimalPages = Template.bind({});
+MinimalPages.args = {
+  ...Basic.args,
+  totalItems: 30,
+  pageSize: 10,
+};
+
+MinimalPages.parameters = {
+  docs: {
+    description: {
+      story: 'Pagination with only a few pages using text theme',
+    },
+  },
+};

frontend/src/Components/Pagination/DrfPagination.tsx

@@ -0,0 +1,109 @@
+import type { ButtonDisplay, ButtonTheme } from '../Button';
+import styles from './DrfPagination.module.scss';
+import { Pagination, PaginationContent, PaginationControll, PaginationEllipsis, PaginationItem } from './components';
+interface DRFPaginationProps {
+  currentPage: number;
+  totalItems: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+  itemClassName?: string;
+  buttonTheme?: ButtonTheme;
+  buttonDisplay?: ButtonDisplay;
+  rounded?: boolean;
+  navButtonTheme?: ButtonTheme; // separate theme for Previous/Next buttons
+}
+
+export const DrfPagination: React.FC<DRFPaginationProps> = ({
+  currentPage,
+  totalItems,
+  pageSize,
+  onPageChange,
+  className,
+  itemClassName,
+  buttonTheme = 'basic',
+  buttonDisplay = 'basic',
+  rounded = false,
+  navButtonTheme = 'basic',
+}) => {
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  const generatePagination = () => {
+    const pages: (number | 'ellipsis')[] = [];
+
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('ellipsis');
+      }
+
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('ellipsis');
+      }
+
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className={styles.container}>
+      <Pagination className={className}>
+        <PaginationContent>
+          <PaginationItem className={itemClassName}>
+            <PaginationControll
+              controllText="Previous"
+              onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              theme={navButtonTheme}
+              display={buttonDisplay}
+              rounded={rounded}
+            />
+          </PaginationItem>
+
+          {generatePagination().map((page, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <PaginationItem key={index} className={itemClassName}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationControll
+                  isActive={page === currentPage}
+                  controllText={String(page)}
+                  onClick={() => onPageChange(page)}
+                  theme={buttonTheme}
+                  display={buttonDisplay}
+                  rounded={rounded}
+                />
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem className={itemClassName}>
+            <PaginationControll
+              controllText="Next"
+              onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              theme={navButtonTheme}
+              display={buttonDisplay}
+              rounded={rounded}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};

frontend/src/Components/Pagination/components/Pagination/Pagination.module.scss

@@ -0,0 +1,4 @@
+.nav {
+  display: flex;
+  align-items: center;
+}

frontend/src/Components/Pagination/components/Pagination/Pagination.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './Pagination.module.scss';
+export const Pagination = React.forwardRef<HTMLElement, React.ComponentProps<'nav'>>(({ className, ...props }, ref) => (
+  <nav ref={ref} aria-label="pagination" className={`${styles.nav} ${className}`} {...props} />
+));
+Pagination.displayName = 'Pagination';

frontend/src/Components/Pagination/components/PaginationContent/PaginationContent.module.scss

@@ -0,0 +1,9 @@
+.list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

frontend/src/Components/Pagination/components/PaginationContent/PaginationContent.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './PaginationContent.module.scss';
+export const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => <ul ref={ref} className={`${styles.list} ${className}`} {...props} />,
+);
+PaginationContent.displayName = 'PaginationContent';

frontend/src/Components/Pagination/components/PaginationControll.tsx

@@ -0,0 +1,44 @@
+import { Button, type ButtonDisplay, type ButtonTheme } from '~/Components/Button';
+import type { ButtonType } from '~/types';
+
+type PaginationControllProps = {
+  isActive?: boolean;
+  className?: string;
+  controllText: string;
+  theme?: ButtonTheme;
+  display?: ButtonDisplay;
+  type?: ButtonType;
+  rounded?: boolean;
+  link?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  preventDefault?: boolean;
+  onClick?: () => void;
+  title?: string;
+};
+
+export function PaginationControll({
+  isActive,
+  className,
+  controllText,
+  theme = 'basic',
+  display = 'basic',
+  rounded = false,
+  disabled,
+  onClick,
+  ...props
+}: PaginationControllProps) {
+  return (
+    <Button
+      theme={isActive ? 'basic' : theme}
+      display={display}
+      rounded={rounded}
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      {...props}
+    >
+      {controllText}
+    </Button>
+  );
+}

frontend/src/Components/Pagination/components/PaginationEllipsis/PaginationEllipsis.module.scss

@@ -0,0 +1,8 @@
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  letter-spacing: 2px;
+  user-select: none;
+}

frontend/src/Components/Pagination/components/PaginationEllipsis/PaginationEllipsis.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './PaginationEllipsis.module.scss';
+export const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={`${styles.ellipsis} ${className}`} {...props}>
+      . . .
+    </span>
+  ),
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

frontend/src/Components/Pagination/components/PaginationItem/PaginationItem.module.scss

@@ -0,0 +1,4 @@
+.item {
+  display: flex;
+  align-items: center;
+}

frontend/src/Components/Pagination/components/PaginationItem/PaginationItem.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './PaginationItem.module.scss';
+export const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={`${styles.item} ${className}`} {...props} />,
+);
+PaginationItem.displayName = 'PaginationItem';

frontend/src/Components/Pagination/components/index.ts

@@ -0,0 +1,5 @@
+export { Pagination } from './Pagination/Pagination';
+export { PaginationContent } from './PaginationContent/PaginationContent';
+export { PaginationControll } from './PaginationControll';
+export { PaginationEllipsis } from './PaginationEllipsis/PaginationEllipsis';
+export { PaginationItem } from './PaginationItem/PaginationItem';

frontend/src/Components/Pagination/index.ts

@@ -0,0 +1 @@
+export { DrfPagination } from './DrfPagination';

frontend/src/Components/index.ts

@@ -49,6 +49,7 @@ export { NumberInput } from './NumberInput';
 export { OccupiedForm, OccupiedFormModal } from './OccupiedForm';
 export { OpeningHours } from './OpeningHours';
 export { Page } from './Page';
+export { DrfPagination } from './Pagination';
 export { PermissionRoute } from './PermissionRoute';
 export { PhoneNumberField } from './PhoneNumberField';
 export { ProgressBar } from './ProgressBar';
@@ -86,7 +87,6 @@ export { ToolTip } from './ToolTip';
 export { UkaOutlet } from './UkaOutlet';
 export { UserFeedback } from './UserFeedback';
 export { Video } from './Video';
-
 // Props
 export type { CheckboxProps } from './Checkbox';
 export type { DropdownProps } from './Dropdown';