Adds pagination component

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

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

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

@@ -0,0 +1,90 @@
+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,
+};
+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,90 @@
+import { Icon } from '@iconify/react';
+import { useMemo } from 'react';
+import styles from './DrfPagination.module.scss';
+import { Pagination, PaginationContent, PaginationControl, PaginationEllipsis, PaginationItem } from './components';
+
+type PaginationItemType = (number | 'ellipsis')[];
+
+interface DRFPaginationProps {
+  currentPage: number;
+  totalItems: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+  itemClassName?: string;
+}
+
+export const DrfPagination: React.FC<DRFPaginationProps> = ({
+  currentPage,
+  totalItems,
+  pageSize,
+  onPageChange,
+  className,
+  itemClassName,
+}) => {
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  const paginationItems = useMemo(() => {
+    const pages: PaginationItemType = [];
+
+    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;
+  }, [currentPage, totalPages]);
+  return (
+    <div className={styles.container}>
+      <Pagination className={className}>
+        <PaginationContent>
+          <PaginationItem className={itemClassName}>
+            <PaginationControl
+              controlSymbol={<Icon icon={'mdi:chevron-left'} />}
+              onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+            />
+          </PaginationItem>
+
+          {paginationItems.map((page, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <PaginationItem key={index} className={itemClassName}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationControl
+                  isActive={page === currentPage}
+                  controlSymbol={String(page)}
+                  onClick={() => onPageChange(page)}
+                />
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem className={itemClassName}>
+            <PaginationControl
+              controlSymbol={<Icon icon={'mdi:chevron-right'} />}
+              onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};

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

@@ -0,0 +1,5 @@
+.nav {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}

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

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+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={classNames(styles.nav, className)} {...props} />
+));
+Pagination.displayName = 'Pagination';

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

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

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

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

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

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+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={classNames(styles.list, className)} {...props} />,
+);
+PaginationContent.displayName = 'PaginationContent';

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

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

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

@@ -0,0 +1,8 @@
+.control {
+  width: 100%;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}

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

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { Button } from '~/Components/Button';
+import styles from './PaginationControl.module.scss';
+
+type PaginationControlProps = {
+  isActive?: boolean;
+  className?: string;
+  controlSymbol: string | ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export function PaginationControl({
+  isActive,
+  className,
+  controlSymbol,
+  disabled,
+  onClick,
+  ...props
+}: PaginationControlProps) {
+  return (
+    <Button
+      theme={isActive ? 'basic' : 'samf'}
+      display={'basic'}
+      rounded={false}
+      onClick={onClick}
+      disabled={disabled}
+      className={classNames(styles.control, className)}
+      {...props}
+    >
+      {controlSymbol}
+    </Button>
+  );
+}

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

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

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

@@ -0,0 +1,9 @@
+// PaginationEllipsis.module.scss
+.ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.5rem;
+  border: 1px solid transparent;
+}

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

@@ -0,0 +1,13 @@
+import { Icon } from '@iconify/react';
+import classNames from 'classnames';
+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={classNames(styles.ellipsis, className)} {...props}>
+      <Icon icon={'lucide:ellipsis'} />
+    </span>
+  ),
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

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

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

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

@@ -0,0 +1,5 @@
+.item {
+  flex: 1;
+  display: flex;
+  min-width: 0; // Allows items to shrink below their content size if needed
+}

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

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+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={classNames(styles.item, className)} {...props} />,
+);
+PaginationItem.displayName = 'PaginationItem';

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

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

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

@@ -0,0 +1,5 @@
+export { Pagination } from './Pagination';
+export { PaginationContent } from './PaginationContent';
+export { PaginationControl } from './PaginationControl';
+export { PaginationEllipsis } from './PaginationEllipsis';
+export { PaginationItem } from './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';