refactor pagination

package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.5",

src/app/globals.css

@@ -32,15 +32,17 @@
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
+    /* --popover: 240 10% 3.9%; */
+    --popover: 225, 6%, 13%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    /* --accent: 240 3.7% 15.9%; */
+    --accent: 205, 92%, 19%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;

src/components/Dataset.tsx

@@ -24,7 +24,7 @@ import React, {
   useState,
 } from 'react';
 
-import Dropdown from '@/components/Dropdown';
+import { PaginationDropdown } from '@/components/PaginationDropdown';
 import {
   PageContext,
   createDatasetStore,
@@ -181,7 +181,7 @@ function PageSizeToolbar() {
         <IconButton color="inherit" onClick={decrease} disabled={page <= 1}>
           <KeyboardArrowLeftIcon />
         </IconButton>
-        <Dropdown content={content} />
+        <PaginationDropdown content={content} />
         {count < totalCount ? `of ${totalCount}` : null}
         <IconButton
           color="inherit"

src/components/PaginationDropdown.tsx

@@ -0,0 +1,55 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+} from '@/components/ui/pagination';
+import { usePageStore } from '@/stores/dataset';
+
+export interface DropdownProps {
+  content: string;
+}
+
+export function PaginationDropdown({ content }: DropdownProps) {
+  const { setPerPage } = usePageStore();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href="#" className="w-full">
+              {content}
+              <KeyboardArrowDownIcon />
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-32">
+        {[10, 100, 500, 1000].map((item) => (
+          <DropdownMenuItem
+            key={item}
+            className="py-1 text-xs"
+            onSelect={() => {
+              setPerPage!(item);
+            }}
+          >
+            {item}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="py-1 text-xs">
+          Default: 500
+        </DropdownMenuLabel>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}