docs: Add Transaction component to the landing page (#979)

coinbase · Aug 5, 2024 · baa0781 · baa0781
1 parent 083fe84
commit baa0781
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 135 deletions.
diff --git a/site/docs/components/landing/NavigationList.tsx b/site/docs/components/landing/NavigationList.tsx
@@ -1,112 +1,9 @@
-const identitySvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Identity SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C15 27.5 15 27.5 15 27.5C14.973 27.5 14.9461 27.4999 14.9192 27.4997C14.5153 27.4972 14.1159 27.4755 13.722 27.4355C12.4613 27.3074 11.2561 26.9921 10.1344 26.5177C8.36951 25.7712 6.81171 24.6309 5.57122 23.2069C5.54692 23.179 5.52274 23.151 5.49869 23.1229C3.62914 20.9381 2.5 18.1009 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15ZM18.75 11.25C18.75 9.17893 17.0711 7.5 15 7.5C12.9289 7.5 11.25 9.17893 11.25 11.25C11.25 13.3211 12.9289 15 15 15C17.0711 15 18.75 13.3211 18.75 11.25ZM15 25C18.4371 25 21.4692 23.266 23.2691 20.625C21.4692 17.984 18.4371 16.25 15 16.25C11.5629 16.25 8.53081 17.984 6.73084 20.625C8.53081 23.266 11.5629 25 15 25Z"
-      fill="#030712"
-    />
-  </svg>
-);
-
-const walletSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Wallet SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M5 2.5H25V7.5H5C3.625 7.5 2.5 6.375 2.5 5C2.5 3.625 3.625 2.5 5 2.5Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M2.5 8.75V23.75C2.5 25.825 4.175 27.5 6.25 27.5H27.5V8.75H2.5ZM22.5 20C21.4625 20 20.625 19.1625 20.625 18.125C20.625 17.0875 21.4625 16.25 22.5 16.25C23.5375 16.25 24.375 17.0875 24.375 18.125C24.375 19.1625 23.5375 20 22.5 20Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const tokensSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Tokens SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M23.75 15.625C23.75 22.1834 18.4334 27.5 11.875 27.5C5.31662 27.5 0 22.1834 0 15.625C0 9.06662 5.31662 3.75 11.875 3.75C18.4334 3.75 23.75 9.06662 23.75 15.625ZM11.875 9.0625L10.1368 13.4568L5.625 13.8371L9.0625 16.9332L8.01229 21.5625L11.875 19.0818L15.7377 21.5625L14.6875 16.9332L18.125 13.8371L13.6132 13.4568L11.875 9.0625Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M30 15.625C30 19.6212 28.026 23.1564 25 25.3086V21.9988C26.5515 20.3262 27.5 18.0864 27.5 15.625C27.5 13.1636 26.5515 10.9238 25 9.25117V5.94138C28.026 8.09364 30 11.6288 30 15.625Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const swapSvg = (
-  <svg
-    width="30"
-    height="30"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Swap SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M22.844 5.40681L22.7821 18.7446L20.2719 18.7446L20.3514 5.40681L15.4105 10.3477L13.6427 8.57995L21.5977 0.625L29.5527 8.57995L27.7849 10.3477L22.844 5.40681Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M7.78073 23.9679L7.84261 10.6301L10.3528 10.6301L10.2733 23.9679L15.2142 19.027L16.982 20.7948L9.027 28.7497L1.07205 20.7948L2.83982 19.027L7.78073 23.9679Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
-
-const frameSvg = (
-  <svg
-    width="34"
-    height="30"
-    viewBox="0 0 34 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Frame SVG</title>
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M6.25229 0H27.3604V30H24.262V16.2581H24.2316C23.8891 12.4601 20.6955 9.48387 16.8064 9.48387C12.9172 9.48387 9.72356 12.4601 9.38112 16.2581H9.35073V30H6.25229V0Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M0.636368 4.25807L1.89511 8.51613H2.9602V25.7419C2.42544 25.7419 1.99194 26.1752 1.99194 26.7097V27.871H1.79828C1.26353 27.871 0.83002 28.3042 0.83002 28.8387V30H11.6746V28.8387C11.6746 28.3042 11.2411 27.871 10.7063 27.871H10.5126V26.7097C10.5126 26.1752 10.0791 25.7419 9.54438 25.7419H8.38247V4.25807H0.636368Z"
-      fill="#F9FAFB"
-    />
-    <path
-      className="fill-gray-50 group-hover:fill-gray-800"
-      d="M24.4556 25.7419C23.9209 25.7419 23.4874 26.1752 23.4874 26.7097V27.871H23.2937C22.759 27.871 22.3254 28.3042 22.3254 28.8387V30H33.17V28.8387C33.17 28.3042 32.7365 27.871 32.2017 27.871H32.0081V26.7097C32.0081 26.1752 31.5746 25.7419 31.0398 25.7419V8.51613H32.1049L33.3636 4.25807H25.6175V25.7419H24.4556Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-);
+import { frameSvg } from '../svg/frameSvg.tsx';
+import { identitySvg } from '../svg/identitySvg.tsx';
+import { swapSvg } from '../svg/swapSvg.tsx';
+import { tokensSvg } from '../svg/tokensSvg.tsx';
+import { transactionSvg } from '../svg/transactionSvg.tsx';
+import { walletSvg } from '../svg/walletSvg.tsx';
 
 const navItems = [
   {
@@ -129,6 +26,11 @@ const navItems = [
     svg: swapSvg,
     label: 'Swap',
   },
+  {
+    href: '#transaction',
+    svg: transactionSvg,
+    label: 'Transaction',
+  },
   {
     href: '#frame',
     svg: frameSvg,
@@ -138,18 +40,18 @@ const navItems = [
 
 export default function NavigationList() {
   return (
-    <ul className="flex max-w-full flex-wrap justify-center gap-12 md:justify-end">
+    <ul className='flex max-w-full flex-wrap justify-center gap-12 md:justify-end'>
       {navItems.map((item) => {
         return (
           <li key={item?.label}>
             <a
               href={item.href}
-              className="group flex flex-col items-center gap-3"
+              className='group flex flex-col items-center gap-3'
             >
-              <div className="h-[70px] w-[70px] rounded-xl bg-gray-800 p-5 group-hover:bg-gray-50">
+              <div className='h-[70px] w-[70px] rounded-xl bg-gray-800 p-5 group-hover:bg-gray-50'>
                 {item.svg}
               </div>
-              <p className="text-center font-normal text-base not-italic leading-6">
+              <p className='text-center font-normal text-base not-italic leading-6'>
                 {item.label}
               </p>
             </a>

diff --git a/site/docs/components/svg/frameSvg.tsx b/site/docs/components/svg/frameSvg.tsx
@@ -0,0 +1,26 @@
+export const frameSvg = (
+  <svg
+    width="34"
+    height="30"
+    viewBox="0 0 34 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Frame SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M6.25229 0H27.3604V30H24.262V16.2581H24.2316C23.8891 12.4601 20.6955 9.48387 16.8064 9.48387C12.9172 9.48387 9.72356 12.4601 9.38112 16.2581H9.35073V30H6.25229V0Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M0.636368 4.25807L1.89511 8.51613H2.9602V25.7419C2.42544 25.7419 1.99194 26.1752 1.99194 26.7097V27.871H1.79828C1.26353 27.871 0.83002 28.3042 0.83002 28.8387V30H11.6746V28.8387C11.6746 28.3042 11.2411 27.871 10.7063 27.871H10.5126V26.7097C10.5126 26.1752 10.0791 25.7419 9.54438 25.7419H8.38247V4.25807H0.636368Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M24.4556 25.7419C23.9209 25.7419 23.4874 26.1752 23.4874 26.7097V27.871H23.2937C22.759 27.871 22.3254 28.3042 22.3254 28.8387V30H33.17V28.8387C33.17 28.3042 32.7365 27.871 32.2017 27.871H32.0081V26.7097C32.0081 26.1752 31.5746 25.7419 31.0398 25.7419V8.51613H32.1049L33.3636 4.25807H25.6175V25.7419H24.4556Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/identitySvg.tsx b/site/docs/components/svg/identitySvg.tsx
@@ -0,0 +1,16 @@
+export const identitySvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Identity SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M27.5 15C27.5 21.9036 21.9036 27.5 15 27.5C15 27.5 15 27.5 15 27.5C14.973 27.5 14.9461 27.4999 14.9192 27.4997C14.5153 27.4972 14.1159 27.4755 13.722 27.4355C12.4613 27.3074 11.2561 26.9921 10.1344 26.5177C8.36951 25.7712 6.81171 24.6309 5.57122 23.2069C5.54692 23.179 5.52274 23.151 5.49869 23.1229C3.62914 20.9381 2.5 18.1009 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15ZM18.75 11.25C18.75 9.17893 17.0711 7.5 15 7.5C12.9289 7.5 11.25 9.17893 11.25 11.25C11.25 13.3211 12.9289 15 15 15C17.0711 15 18.75 13.3211 18.75 11.25ZM15 25C18.4371 25 21.4692 23.266 23.2691 20.625C21.4692 17.984 18.4371 16.25 15 16.25C11.5629 16.25 8.53081 17.984 6.73084 20.625C8.53081 23.266 11.5629 25 15 25Z"
+      fill="#030712"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/swapSvg.tsx b/site/docs/components/svg/swapSvg.tsx
@@ -0,0 +1,21 @@
+export const swapSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Swap SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M22.844 5.40681L22.7821 18.7446L20.2719 18.7446L20.3514 5.40681L15.4105 10.3477L13.6427 8.57995L21.5977 0.625L29.5527 8.57995L27.7849 10.3477L22.844 5.40681Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M7.78073 23.9679L7.84261 10.6301L10.3528 10.6301L10.2733 23.9679L15.2142 19.027L16.982 20.7948L9.027 28.7497L1.07205 20.7948L2.83982 19.027L7.78073 23.9679Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/tokensSvg.tsx b/site/docs/components/svg/tokensSvg.tsx
@@ -0,0 +1,21 @@
+export const tokensSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Tokens SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M23.75 15.625C23.75 22.1834 18.4334 27.5 11.875 27.5C5.31662 27.5 0 22.1834 0 15.625C0 9.06662 5.31662 3.75 11.875 3.75C18.4334 3.75 23.75 9.06662 23.75 15.625ZM11.875 9.0625L10.1368 13.4568L5.625 13.8371L9.0625 16.9332L8.01229 21.5625L11.875 19.0818L15.7377 21.5625L14.6875 16.9332L18.125 13.8371L13.6132 13.4568L11.875 9.0625Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M30 15.625C30 19.6212 28.026 23.1564 25 25.3086V21.9988C26.5515 20.3262 27.5 18.0864 27.5 15.625C27.5 13.1636 26.5515 10.9238 25 9.25117V5.94138C28.026 8.09364 30 11.6288 30 15.625Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/transactionSvg.tsx b/site/docs/components/svg/transactionSvg.tsx
@@ -0,0 +1,21 @@
+export const transactionSvg = (
+  <svg
+    width="31"
+    height="30"
+    viewBox="0 0 31 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Transaction SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M0.5 20V16.875H30.5L20.5 27.5L21.125 20H0.5Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M30.5 10V13.125L0.5 13.125L10.5 2.5L9.875 10L30.5 10Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
diff --git a/site/docs/components/svg/walletSvg.tsx b/site/docs/components/svg/walletSvg.tsx
@@ -0,0 +1,21 @@
+export const walletSvg = (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Wallet SVG</title>
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M5 2.5H25V7.5H5C3.625 7.5 2.5 6.375 2.5 5C2.5 3.625 3.625 2.5 5 2.5Z"
+      fill="#F9FAFB"
+    />
+    <path
+      className="fill-gray-50 group-hover:fill-gray-800"
+      d="M2.5 8.75V23.75C2.5 25.825 4.175 27.5 6.25 27.5H27.5V8.75H2.5ZM22.5 20C21.4625 20 20.625 19.1625 20.625 18.125C20.625 17.0875 21.4625 16.25 22.5 16.25C23.5375 16.25 24.375 17.0875 24.375 18.125C24.375 19.1625 23.5375 20 22.5 20Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);