feat: add icon components

across-protocol · Feb 6, 2024 · dc7506c · dc7506c
1 parent fc25936
commit dc7506c
Show file tree

Hide file tree

Showing 27 changed files with 2,722 additions and 1 deletion.
diff --git a/src/app/(routes)/icons/page.tsx b/src/app/(routes)/icons/page.tsx
@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+
+import * as icons from "@/app/_components/icons";
+
+export const metadata: Metadata = {
+  title: "Across Bridge",
+  description: "Interoperability powered by Intents.",
+};
+
+export default function IconsPage() {
+  return (
+    <main className="container mx-auto flex flex-wrap gap-4 p-12">
+      {Object.entries(icons).map(([name, Icon]) => (
+        <div key={name} className="flex flex-col items-center gap-4">
+          <Icon />
+          <code>{name}</code>
+        </div>
+      ))}
+    </main>
+  );
+}
diff --git a/src/app/_components/header-nav.tsx b/src/app/_components/header-nav.tsx
@@ -1,11 +1,18 @@
 import Link from "next/link";
 
+import { AcrossIcon } from "./icons/across";
+
 export default function HeaderNav() {
   return (
     <header className="container mx-auto flex items-center justify-between p-4">
-      <h1 className="text-2xl font-bold">Across</h1>
+      <Link href="/">
+        <AcrossIcon className="fill-aqua-100" />
+      </Link>
       <nav>
         <ul className="flex gap-4">
+          <li>
+            <Link href="/"></Link>
+          </li>
           <li>
             <Link href="/">Home</Link>
           </li>

diff --git a/src/app/_components/icons/across.tsx b/src/app/_components/icons/across.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function AcrossIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twMerge("fill-aqua-100", className)}
+      {...props}
+    >
+      <rect width="32" height="32" rx="16" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.95155 8.41964L8.51084 6.86035L14.7421 13.0917C14.364 13.2528 14.0097 13.4876 13.7012 13.7961C13.4623 14.035 13.2675 14.3014 13.117 14.5851L6.95155 8.41964ZM12.9996 17.4397L6.85938 23.5799L8.41866 25.1392L14.4964 19.0614C14.2104 18.9105 13.9419 18.7146 13.7012 18.474C13.3945 18.1673 13.1606 17.8154 12.9996 17.4397ZM17.5901 19.0582L23.5839 25.052L25.1432 23.4927L19.0835 17.433C18.9224 17.8112 18.6875 18.1655 18.379 18.474C18.1401 18.7129 17.8737 18.9076 17.5901 19.0582ZM18.9665 14.5913L25.051 8.50682L23.4917 6.94754L17.3448 13.0945C17.7204 13.2556 18.0724 13.4894 18.379 13.7961C18.6197 14.0368 18.8155 14.3053 18.9665 14.5913Z"
+        fill="#2D2E33"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/arrow-up.tsx b/src/app/_components/icons/gradient/arrow-up.tsx
@@ -0,0 +1,124 @@
+import { SVGProps } from "react";
+
+export function ArrowUpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="96" height="25.7143" rx="6" fill="#44D2FF" fill-opacity="0.15" />
+      <rect
+        opacity="0.2"
+        y="70.2856"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#44D2FF"
+        fill-opacity="0.15"
+      />
+      <rect
+        opacity="0.5"
+        y="36"
+        width="96"
+        height="25.7143"
+        rx="6"
+        fill="#44D2FF"
+        fill-opacity="0.15"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        fill="url(#paint0_linear_564_7320)"
+      />
+      <path
+        d="M38.5714 57.7152V48.2866H26L48 26.2866L70 48.2866H57.4286V57.7152H38.5714Z"
+        stroke="url(#paint1_linear_564_7320)"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path d="M38.5703 69.7153H57.4275H38.5703Z" fill="#D9D9D9" />
+      <path d="M38.5703 69.7153H57.4275H38.5703Z" fill="url(#paint2_linear_564_7320)" />
+      <path
+        d="M38.5703 69.7153H57.4275"
+        stroke="url(#paint3_linear_564_7320)"
+        stroke-width="5.14286"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7320"
+          x1="48"
+          y1="26.2866"
+          x2="48"
+          y2="57.7152"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7320"
+          x1="48"
+          y1="26.2866"
+          x2="48"
+          y2="57.7152"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7320"
+          x1="47.9989"
+          y1="69.7153"
+          x2="47.9989"
+          y2="70.7153"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_564_7320"
+          x1="47.9989"
+          y1="69.7153"
+          x2="47.9989"
+          y2="70.7153"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#6CD3F9" />
+          <stop offset="0.386534" stop-color="#B1EAFF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#00719A" />
+          <stop offset="0.620948" stop-color="#C1EEFF" />
+          <stop offset="0.708229" stop-color="#297B99" />
+          <stop offset="0.78803" stop-color="#ADE9FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/blocks-connected.tsx b/src/app/_components/icons/gradient/blocks-connected.tsx
@@ -0,0 +1,113 @@
+import { SVGProps } from "react";
+
+export function BlocksConnectedIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="96"
+      height="96"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="46.2857" height="25.7143" rx="6" fill="#AA81FF" fill-opacity="0.2" />
+      <rect
+        opacity="0.2"
+        y="70.2856"
+        width="46.2857"
+        height="25.7143"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <rect
+        opacity="0.5"
+        x="46.2852"
+        y="36"
+        width="49.7143"
+        height="25.7143"
+        rx="6"
+        fill="#AA81FF"
+        fill-opacity="0.2"
+      />
+      <path
+        d="M34.2874 18.8569H22.8588C19.7029 18.8569 17.1445 21.4153 17.1445 24.5712V35.9998C17.1445 39.1557 19.7029 41.7141 22.8588 41.7141H34.2874C37.4433 41.7141 40.0017 39.1557 40.0017 35.9998V24.5712C40.0017 21.4153 37.4433 18.8569 34.2874 18.8569Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M34.2874 18.8569H22.8588C19.7029 18.8569 17.1445 21.4153 17.1445 24.5712V35.9998C17.1445 39.1557 19.7029 41.7141 22.8588 41.7141H34.2874C37.4433 41.7141 40.0017 39.1557 40.0017 35.9998V24.5712C40.0017 21.4153 37.4433 18.8569 34.2874 18.8569Z"
+        fill="url(#paint0_linear_564_7341)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.572 47.4272C30.1499 47.4272 31.4291 48.7064 31.4291 50.2844V61.713C31.4291 62.4707 31.7301 63.1974 32.266 63.7333C32.8018 64.2691 33.5285 64.5701 34.2863 64.5701H45.7148C47.2928 64.5701 48.572 65.8493 48.572 67.4272C48.572 69.0052 47.2928 70.2844 45.7148 70.2844H34.2863C32.013 70.2844 29.8328 69.3813 28.2254 67.7739C26.6179 66.1664 25.7148 63.9862 25.7148 61.713V50.2844C25.7148 48.7064 26.994 47.4272 28.572 47.4272Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.572 47.4272C30.1499 47.4272 31.4291 48.7064 31.4291 50.2844V61.713C31.4291 62.4707 31.7301 63.1974 32.266 63.7333C32.8018 64.2691 33.5285 64.5701 34.2863 64.5701H45.7148C47.2928 64.5701 48.572 65.8493 48.572 67.4272C48.572 69.0052 47.2928 70.2844 45.7148 70.2844H34.2863C32.013 70.2844 29.8328 69.3813 28.2254 67.7739C26.6179 66.1664 25.7148 63.9862 25.7148 61.713V50.2844C25.7148 48.7064 26.994 47.4272 28.572 47.4272Z"
+        fill="url(#paint1_linear_564_7341)"
+      />
+      <path
+        d="M71.428 55.9985H59.9994C56.8435 55.9985 54.2852 58.5569 54.2852 61.7128V73.1414C54.2852 76.2973 56.8435 78.8557 59.9994 78.8557H71.428C74.5839 78.8557 77.1423 76.2973 77.1423 73.1414V61.7128C77.1423 58.5569 74.5839 55.9985 71.428 55.9985Z"
+        fill="#D9D9D9"
+      />
+      <path
+        d="M71.428 55.9985H59.9994C56.8435 55.9985 54.2852 58.5569 54.2852 61.7128V73.1414C54.2852 76.2973 56.8435 78.8557 59.9994 78.8557H71.428C74.5839 78.8557 77.1423 76.2973 77.1423 73.1414V61.7128C77.1423 58.5569 74.5839 55.9985 71.428 55.9985Z"
+        fill="url(#paint2_linear_564_7341)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_564_7341"
+          x1="28.5731"
+          y1="18.8569"
+          x2="28.5731"
+          y2="41.7141"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_564_7341"
+          x1="37.1434"
+          y1="50.2844"
+          x2="37.1434"
+          y2="67.4272"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_564_7341"
+          x1="65.7137"
+          y1="55.9985"
+          x2="65.7137"
+          y2="78.8557"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stop-color="#A26CF9" />
+          <stop offset="0.386534" stop-color="#CEB1FF" />
+          <stop offset="0.508728" stop-color="white" />
+          <stop offset="0.513716" stop-color="#3B009A" />
+          <stop offset="0.620948" stop-color="#D8C1FF" />
+          <stop offset="0.708229" stop-color="#542999" />
+          <stop offset="0.78803" stop-color="#CCADFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}