From c3bcb96badeab0a3951cbb2572b5e94867088a00 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 11 Dec 2024 00:43:43 +0000
Subject: [PATCH] add icons

---
 .../public/icons/arrow-up-right.svg           | 61 ++++++++++++++
 explorer-nextjs/public/icons/copy-file.svg    | 35 ++++++++
 explorer-nextjs/public/icons/gateway.svg      | 79 +++++++++++++++++++
 .../src/components/icons/ArrowUpRight.tsx     | 12 +++
 .../src/components/icons/CopyFile.tsx         | 13 +++
 .../src/components/icons/Gateway.tsx          |  9 +++
 6 files changed, 209 insertions(+)
 create mode 100644 explorer-nextjs/public/icons/arrow-up-right.svg
 create mode 100644 explorer-nextjs/public/icons/copy-file.svg
 create mode 100644 explorer-nextjs/public/icons/gateway.svg
 create mode 100644 explorer-nextjs/src/components/icons/ArrowUpRight.tsx
 create mode 100644 explorer-nextjs/src/components/icons/CopyFile.tsx
 create mode 100644 explorer-nextjs/src/components/icons/Gateway.tsx

diff --git a/explorer-nextjs/public/icons/arrow-up-right.svg b/explorer-nextjs/public/icons/arrow-up-right.svg
new file mode 100644
index 0000000000..85c8811910
--- /dev/null
+++ b/explorer-nextjs/public/icons/arrow-up-right.svg
@@ -0,0 +1,61 @@
+<svg
+  width="33"
+  height="32"
+  viewBox="0 0 33 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect
+    width="6.4"
+    height="6.38019"
+    transform="matrix(1 1.74846e-07 1.74846e-07 -1 7.06641 25.5204)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="6.4"
+    height="6.38019"
+    transform="matrix(1 1.74846e-07 1.74846e-07 -1 0.666504 31.9006)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="6.4"
+    height="6.38019"
+    transform="matrix(1 1.74846e-07 1.74846e-07 -1 13.4663 19.1406)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="6.4"
+    height="6.38019"
+    transform="matrix(1 1.74846e-07 1.74846e-07 -1 19.8667 12.761)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M32.6663 32L26.2663 32L26.2663 6.38018L0.708989 6.38017L0.70899 -1.52588e-05L24.9863 -1.1014e-05C29.2278 -1.02724e-05 32.6663 3.43845 32.6663 7.68L32.6663 32Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+</svg>
diff --git a/explorer-nextjs/public/icons/copy-file.svg b/explorer-nextjs/public/icons/copy-file.svg
new file mode 100644
index 0000000000..ff12690bfb
--- /dev/null
+++ b/explorer-nextjs/public/icons/copy-file.svg
@@ -0,0 +1,35 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.6668 13.3333V14.6667H10.0002V15.3333H2.00016V14.6667H1.3335V3.99999H2.00016V3.33333H4.00016V13.3333H10.6668Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M10.6665 4.66667V0.666672H5.33317V1.33334H4.6665V12H5.33317V12.6667H13.9998V12H14.6665V4.66667H10.6665ZM13.3332 11.3333H5.99984V2.00001H9.33317V6.00001H13.3332V11.3333Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M14.6668 3.33334V4H11.3335V0.666672H12.0002V1.33334H12.6668V2.00001H13.3335V2.66667H14.0002V3.33334H14.6668Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+</svg>
diff --git a/explorer-nextjs/public/icons/gateway.svg b/explorer-nextjs/public/icons/gateway.svg
new file mode 100644
index 0000000000..50673da861
--- /dev/null
+++ b/explorer-nextjs/public/icons/gateway.svg
@@ -0,0 +1,79 @@
+<svg
+  width="84"
+  height="84"
+  viewBox="0 0 84 84"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect
+    width="7"
+    height="56"
+    transform="matrix(-2.36041e-07 1 1 7.28523e-08 28 77)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="7"
+    height="56"
+    transform="matrix(1 0 -1.63189e-07 -1 0 56)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M63 0L63 21L84 21L84 28L63 28C59.134 28 56 24.866 56 21L56 0H63Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="7"
+    height="42"
+    transform="matrix(1 0 -1.63189e-07 -1 28 42)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <rect
+    width="7"
+    height="35"
+    transform="matrix(-2.36041e-07 1 1 7.28523e-08 49 49)"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M28 84L28 77L7 77L7 56L-1.89145e-06 56L-2.80939e-06 77C-2.97838e-06 80.866 3.134 84 7 84L28 84Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+  <path
+    d="M56 56L56 49L35 49L35 28L28 28L28 49C28 52.866 31.134 56 35 56L56 56Z"
+    fill="#242B2D"
+    style="
+      fill: #242b2d;
+      fill: color(display-p3 0.1412 0.1686 0.1765);
+      fill-opacity: 1;
+    "
+  />
+</svg>
diff --git a/explorer-nextjs/src/components/icons/ArrowUpRight.tsx b/explorer-nextjs/src/components/icons/ArrowUpRight.tsx
new file mode 100644
index 0000000000..785c9c0175
--- /dev/null
+++ b/explorer-nextjs/src/components/icons/ArrowUpRight.tsx
@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+const ArrowUpRight = () => (
+  <Image
+    src="icons/arrow-up-right.svg"
+    alt="Arrow Up Right"
+    width={32}
+    height={32}
+  />
+);
+
+export default ArrowUpRight;
diff --git a/explorer-nextjs/src/components/icons/CopyFile.tsx b/explorer-nextjs/src/components/icons/CopyFile.tsx
new file mode 100644
index 0000000000..497ea06128
--- /dev/null
+++ b/explorer-nextjs/src/components/icons/CopyFile.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+const CopyFile = ({ className }: { className?: string }) => (
+  <Image
+    src="/icons/copy-file.svg"
+    alt="Copyfile"
+    width={16}
+    height={16}
+    className={className}
+  />
+);
+
+export default CopyFile;
diff --git a/explorer-nextjs/src/components/icons/Gateway.tsx b/explorer-nextjs/src/components/icons/Gateway.tsx
new file mode 100644
index 0000000000..87baa460fb
--- /dev/null
+++ b/explorer-nextjs/src/components/icons/Gateway.tsx
@@ -0,0 +1,9 @@
+import Image from "next/image";
+
+const Gateway = () => {
+  return (
+    <Image src="/icons/gateway.svg" alt="Chevron Menu" width={84} height={84} />
+  );
+};
+
+export default Gateway;