diff --git a/src/components/Entities.tsx b/src/components/Entities.tsx
index cd9d699..16b7229 100644
--- a/src/components/Entities.tsx
+++ b/src/components/Entities.tsx
@@ -9,7 +9,6 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
import { useLocalStorage } from '../hooks/useLocalStorage';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import SortControls from './SortControls';
import { EntityFilterContext } from '../context/EntityFilterContext';
import { EntityFilters } from '../types/filters';
import { ActiveEntityFilters as ActiveFilters } from './ActiveEntityFilters';
@@ -126,6 +125,11 @@ export default function Entities() {
totalItems={data.total}
itemsPerPage={itemsPerPage}
onItemsPerPageChange={handleItemsPerPageChange}
+ sort={sort}
+ setSort={setSort}
+ direction={direction}
+ setDirection={setDirection}
+ sortOptions={sortOptions}
/>
);
};
@@ -198,13 +202,6 @@ export default function Entities() {
-
)}
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index 66a8987..048f08a 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -9,7 +9,6 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
import { useLocalStorage } from '../hooks/useLocalStorage';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import SortControls from './SortControls';
import { EventFilterContext } from '../context/EventFilterContext';
import { EventFilters } from '../types/filters';
import { ActiveEventFilters as ActiveFilters } from './ActiveEventFilters';
@@ -136,6 +135,11 @@ export default function Events() {
totalItems={data.total}
itemsPerPage={itemsPerPage}
onItemsPerPageChange={handleItemsPerPageChange}
+ sort={sort}
+ setSort={setSort}
+ direction={direction}
+ setDirection={setDirection}
+ sortOptions={sortOptions}
/>
);
};
@@ -208,13 +212,7 @@ export default function Events() {
-
+
)}
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index c339c69..0a61c91 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -1,6 +1,7 @@
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ChevronLeft, ChevronRight } from "lucide-react";
+import SortControls from './SortControls';
interface PaginationProps {
currentPage: number;
@@ -10,6 +11,11 @@ interface PaginationProps {
totalItems: number;
itemsPerPage: number;
onItemsPerPageChange: (count: number) => void;
+ sort: string;
+ setSort: (value: string) => void;
+ direction: 'asc' | 'desc';
+ setDirection: (value: 'asc' | 'desc') => void;
+ sortOptions: { value: string; label: string }[];
}
const itemsPerPageOptions = [
@@ -26,12 +32,19 @@ export function Pagination({
totalItems,
itemsPerPage,
onItemsPerPageChange,
+ sort,
+ setSort,
+ direction,
+ setDirection,
+ sortOptions
}: PaginationProps) {
+
return (
-
+
+
Showing{' '}
{((currentPage - 1) * itemsPerPage) + 1}{' '}
to{' '}
@@ -58,6 +71,14 @@ export function Pagination({
))}
+
+
diff --git a/src/components/SortControls.tsx b/src/components/SortControls.tsx
index cbe262a..94bf12d 100644
--- a/src/components/SortControls.tsx
+++ b/src/components/SortControls.tsx
@@ -12,34 +12,34 @@ interface SortControlsProps {
const SortControls: React.FC
= ({ sort, setSort, direction, setDirection, sortOptions }) => {
return (
-
-
- Sort by:
-
-
-
+
+
+ Sort by:
+
+
+
);
};