Port LeftIcon RightIcon from ErrorPagination (#74098)

Ported LeftIcon and RightIcon used in the pagination.
vercel · Dec 20, 2024 · f5912f7 · f5912f7
1 parent b40e1a2
commit f5912f7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/...-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx b/...-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx
@@ -1,5 +1,7 @@
 import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { LeftArrow } from '../../../icons/LeftArrow'
+import { RightArrow } from '../../../icons/RightArrow'
 
 type ErrorPaginationProps = {
   activeIdx: number
@@ -115,20 +117,7 @@ export function ErrorPagination({
           aria-disabled={previousHandler == null ? true : undefined}
           onClick={previousHandler ?? undefined}
         >
-          <svg
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>previous</title>
-            <path
-              d="M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <LeftArrow title="previous" />
         </button>
         <button
           ref={buttonRight}
@@ -137,20 +126,7 @@ export function ErrorPagination({
           aria-disabled={nextHandler == null ? true : undefined}
           onClick={nextHandler ?? undefined}
         >
-          <svg
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>next</title>
-            <path
-              d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <RightArrow title="next" />
         </button>
         <small>
           <span>{activeIdx + 1}</span> of{' '}

diff --git a/...s/next/src/client/components/react-dev-overlay/_experimental/internal/icons/LeftArrow.tsx b/...s/next/src/client/components/react-dev-overlay/_experimental/internal/icons/LeftArrow.tsx
@@ -0,0 +1,14 @@
+export function LeftArrow({ title }: { title: string }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>{title}</title>
+      <path
+        d="M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/icons/RightArrow.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/icons/RightArrow.tsx
@@ -0,0 +1,14 @@
+export function RightArrow({ title }: { title: string }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>{title}</title>
+      <path
+        d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}