add cards table and pagination

src/assets/icons/index.ts

@@ -10,3 +10,5 @@ export { default as PersonOutline } from './person-outline'
 export { default as ChevronUp } from './chevron-up'
 export { default as Close } from './close'
 export { default as Search } from './search'
+export { default as KeyboardArrowLeft } from './keyboard-arrow-left'
+export { default as KeyboardArrowRight } from './keyboard-arrow-right'

src/assets/icons/keyboard-arrow-left.tsx

@@ -0,0 +1,27 @@
+import { SVGProps, Ref, forwardRef, memo } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <g clipPath="url(#clip0_5928_3055)">
+      <path
+        d="M10.2733 11.06L7.21998 8L10.2733 4.94L9.33331 4L5.33331 8L9.33331 12L10.2733 11.06Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5928_3055">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+const ForwardRef = forwardRef(SvgComponent)
+
+export default memo(ForwardRef)

src/assets/icons/keyboard-arrow-right.tsx

@@ -0,0 +1,27 @@
+import { SVGProps, Ref, forwardRef, memo } from 'react'
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <g clipPath="url(#clip0_5928_3027)">
+      <path
+        d="M5.72665 11.06L8.77999 8L5.72665 4.94L6.66665 4L10.6667 8L6.66665 12L5.72665 11.06Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5928_3027">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+const ForwardRef = forwardRef(SvgComponent)
+
+export default memo(ForwardRef)