Navigation Header component

packages/libs/react-ui/src/components/BrandLogo/index.tsx

@@ -0,0 +1,32 @@
+import { KadenaLogo } from './variants/Kadena';
+import { KadenaDevToolsLogo } from './variants/KadenaDevTools';
+import { KadenaDocsLogo } from './variants/KadenaDocs';
+
+import React, { FC, SVGProps } from 'react';
+
+export type LogoVariant = 'Kadena' | 'DevTools' | 'Docs';
+export const logoVariants: LogoVariant[] = ['Kadena', 'DevTools', 'Docs'];
+
+export interface IBrandLogoProps {
+  variant?: LogoVariant;
+}
+
+const renderSwitch = (
+  logo: LogoVariant = 'Kadena',
+): FC<SVGProps<SVGSVGElement>> => {
+  switch (logo) {
+    case 'Docs':
+      return KadenaDocsLogo;
+    case 'DevTools':
+      return KadenaDevToolsLogo;
+    default:
+      return KadenaLogo;
+  }
+};
+
+const BrandLogo: FC<IBrandLogoProps> = ({ variant }) => {
+  const LogoComponent = renderSwitch(variant);
+  return <LogoComponent />;
+};
+
+export default BrandLogo;

packages/libs/react-ui/src/components/BrandLogo/readme.md

@@ -0,0 +1,3 @@
+This is just an idea to ensure we all get the brand logos from the same source
+and can easily maintain them and ensure their quality. Todo: finetune this and
+add all the logos etc.

packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+export const KadenaLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_3_15)">
+      <path
+        d="M31.5523 6.62952H23.7098L14.4796 16.3155V24.3859L31.5523 6.62952Z"
+        fill="url(#paint0_linear_3_15)"
+      />
+      <path d="M14.4796 33.3705H7.8501V6.62952H14.4796V33.3705Z" fill="white" />
+      <path
+        d="M32.1499 33.3705L21.256 17.3386L16.8195 21.9499L24.4518 33.3705H32.1499Z"
+        fill="url(#paint1_linear_3_15)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_3_15"
+        x1="14.4796"
+        y1="15.5077"
+        x2="31.5523"
+        y2="15.5077"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="0.6" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_3_15"
+        x1="15.5989"
+        y1="20.6432"
+        x2="29.3973"
+        y2="29.6024"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="0.6" stopColor="white" />
+      </linearGradient>
+      <clipPath id="clip0_3_15">
+        <rect width="40" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDevTools.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const KadenaDevToolsLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="146"
+    height="44"
+    viewBox="0 0 146 44"
+    fill="none"
+  >
+    <path
+      d="M25.2418 11.3036H18.9678L11.5837 19.0524V25.5088L25.2418 11.3036Z"
+      fill="url(#paint0_linear_2005_70)"
+    />
+    <path
+      d="M11.5837 32.6964H6.28009V11.3036H11.5837V32.6964Z"
+      fill="#F0F0F0"
+    />
+    <path
+      d="M25.7199 32.6964L17.0048 19.8708L13.4556 23.5599L19.5614 32.6964H25.7199Z"
+      fill="url(#paint1_linear_2005_70)"
+    />
+    <path
+      d="M40.825 27V16.275H45.01C47.875 16.275 49.72 18.585 49.72 21.75C49.72 23.49 49.135 25.02 48.01 25.965C47.215 26.625 46.18 27 44.83 27H40.825ZM43 25.125H44.68C46.72 25.125 47.515 23.88 47.515 21.75C47.515 19.62 46.585 18.135 44.74 18.135H43V25.125ZM54.3531 27.225C51.8031 27.225 50.3631 25.44 50.3631 23.145C50.3631 20.865 51.9081 19.095 54.1581 19.095C56.6331 19.095 57.9531 20.985 57.9531 23.73H52.3731C52.5231 24.915 53.1831 25.65 54.3381 25.65C55.1331 25.65 55.5981 25.29 55.8231 24.705H57.8331C57.5481 26.07 56.3331 27.225 54.3531 27.225ZM54.1881 20.67C53.1081 20.67 52.5831 21.315 52.4031 22.32H55.8231C55.7631 21.345 55.1181 20.67 54.1881 20.67ZM60.7908 27L58.1208 19.305H60.1908L61.4208 23.295C61.6458 24.03 61.7658 24.525 61.7658 24.525H61.7958C61.7958 24.525 61.9008 24.03 62.1258 23.295L63.3858 19.305H65.4258L62.7408 27H60.7908ZM69.5143 27.225C66.9643 27.225 65.5243 25.44 65.5243 23.145C65.5243 20.865 67.0693 19.095 69.3193 19.095C71.7943 19.095 73.1143 20.985 73.1143 23.73H67.5343C67.6843 24.915 68.3443 25.65 69.4993 25.65C70.2943 25.65 70.7593 25.29 70.9843 24.705H72.9943C72.7093 26.07 71.4943 27.225 69.5143 27.225ZM69.3493 20.67C68.2693 20.67 67.7443 21.315 67.5643 22.32H70.9843C70.9243 21.345 70.2793 20.67 69.3493 20.67ZM74.0884 27V16.275H76.1284V27H74.0884ZM81.1165 27.225C78.7315 27.225 77.0965 25.455 77.0965 23.16C77.0965 20.865 78.7315 19.095 81.1165 19.095C83.5015 19.095 85.1365 20.865 85.1365 23.16C85.1365 25.455 83.5015 27.225 81.1165 27.225ZM81.1165 25.665C82.3615 25.665 83.0665 24.66 83.0665 23.16C83.0665 21.66 82.3615 20.64 81.1165 20.64C79.8565 20.64 79.1665 21.66 79.1665 23.16C79.1665 24.66 79.8565 25.665 81.1165 25.665ZM86.0848 29.52V19.305H88.0498V20.265H88.0948C88.5898 19.59 89.3098 19.095 90.3598 19.095C92.3998 19.095 93.7048 20.76 93.7048 23.16C93.7048 25.65 92.3548 27.225 90.3748 27.225C89.2948 27.225 88.5898 26.79 88.1548 26.13H88.1248V29.52H86.0848ZM89.9398 25.53C90.9748 25.53 91.6348 24.675 91.6348 23.22C91.6348 21.765 91.1248 20.745 89.8648 20.745C88.5898 20.745 88.0798 21.84 88.0798 23.22C88.0798 24.615 88.7248 25.53 89.9398 25.53ZM98.2691 27.225C95.7191 27.225 94.2791 25.44 94.2791 23.145C94.2791 20.865 95.8241 19.095 98.0741 19.095C100.549 19.095 101.869 20.985 101.869 23.73H96.2891C96.4391 24.915 97.0991 25.65 98.2541 25.65C99.0491 25.65 99.5141 25.29 99.7391 24.705H101.749C101.464 26.07 100.249 27.225 98.2691 27.225ZM98.1041 20.67C97.0241 20.67 96.4991 21.315 96.3191 22.32H99.7391C99.6791 21.345 99.0341 20.67 98.1041 20.67ZM104.778 19.305V20.535H104.823C105.288 19.665 105.813 19.215 106.713 19.215C106.938 19.215 107.073 19.23 107.193 19.275V21.06H107.148C105.813 20.925 104.853 21.63 104.853 23.25V27H102.813V19.305H104.778ZM110.202 18.105V16.275H118.827V18.105H115.602V27H113.427V18.105H110.202ZM121.678 27.225C119.293 27.225 117.658 25.455 117.658 23.16C117.658 20.865 119.293 19.095 121.678 19.095C124.063 19.095 125.698 20.865 125.698 23.16C125.698 25.455 124.063 27.225 121.678 27.225ZM121.678 25.665C122.923 25.665 123.628 24.66 123.628 23.16C123.628 21.66 122.923 20.64 121.678 20.64C120.418 20.64 119.728 21.66 119.728 23.16C119.728 24.66 120.418 25.665 121.678 25.665ZM130.291 27.225C127.906 27.225 126.271 25.455 126.271 23.16C126.271 20.865 127.906 19.095 130.291 19.095C132.676 19.095 134.311 20.865 134.311 23.16C134.311 25.455 132.676 27.225 130.291 27.225ZM130.291 25.665C131.536 25.665 132.241 24.66 132.241 23.16C132.241 21.66 131.536 20.64 130.291 20.64C129.031 20.64 128.341 21.66 128.341 23.16C128.341 24.66 129.031 25.665 130.291 25.665ZM135.29 27V16.275H137.33V27H135.29ZM141.793 27.225C139.558 27.225 138.313 26.145 138.193 24.51H140.083C140.218 25.395 140.848 25.785 141.763 25.785C142.663 25.785 143.173 25.44 143.173 24.9C143.173 24.165 142.198 24.09 141.148 23.88C139.768 23.61 138.418 23.235 138.418 21.555C138.418 19.89 139.798 19.095 141.553 19.095C143.578 19.095 144.703 20.1 144.853 21.645H143.008C142.918 20.82 142.393 20.52 141.523 20.52C140.728 20.52 140.203 20.82 140.203 21.375C140.203 22.035 141.223 22.095 142.318 22.32C143.608 22.59 145.033 22.95 145.033 24.75C145.033 26.295 143.713 27.225 141.793 27.225Z"
+      fill="#FAFAFA"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_2005_70"
+        x1="11.5837"
+        y1="18.4062"
+        x2="25.2418"
+        y2="18.4062"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0" />
+        <stop offset="0.6" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_2005_70"
+        x1="13.5"
+        y1="26.5"
+        x2="23.5179"
+        y2="29.6819"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0" />
+        <stop offset="0.6" stopColor="white" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export { KadenaDevToolsLogo };

packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDocs.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const KadenaDocsLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
+  <svg
+    width="107"
+    height="44"
+    viewBox="0 0 107 44"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M34.7074 7.29248H26.0807L15.9275 17.9471V26.8245L34.7074 7.29248Z"
+      fill="url(#paint0_linear_673_240)"
+    ></path>
+    <path
+      d="M15.9275 36.7075H8.63501V7.29248H15.9275V36.7075Z"
+      fill="#F0F0F0"
+    ></path>
+    <path
+      d="M35.365 36.7076L23.3817 19.0725L18.5015 24.1449L26.897 36.7076H35.365Z"
+      fill="url(#paint1_linear_673_240)"
+    ></path>
+    <path
+      d="M41.2319 17.7322C40.8803 17.7322 40.5785 17.608 40.3263 17.3594C40.0778 17.1108 39.9535 16.8089 39.9535 16.4538C39.9535 16.1058 40.0778 15.8075 40.3263 15.5589C40.5785 15.3104 40.8803 15.1861 41.2319 15.1861C41.5728 15.1861 41.8711 15.3104 42.1268 15.5589C42.3825 15.8075 42.5103 16.1058 42.5103 16.4538C42.5103 16.6882 42.4499 16.9031 42.3292 17.0984C42.212 17.2901 42.0575 17.4446 41.8658 17.5618C41.674 17.6754 41.4627 17.7322 41.2319 17.7322ZM41.2319 12.3789C40.8803 12.3789 40.5785 12.2546 40.3263 12.006C40.0778 11.7575 39.9535 11.4556 39.9535 11.1005C39.9535 10.7525 40.0778 10.456 40.3263 10.2109C40.5785 9.96236 40.8803 9.83807 41.2319 9.83807C41.5728 9.83807 41.8711 9.96236 42.1268 10.2109C42.3825 10.456 42.5103 10.7525 42.5103 11.1005C42.5103 11.3384 42.4499 11.555 42.3292 11.7504C42.212 11.9421 42.0575 12.0948 41.8658 12.2085C41.674 12.3221 41.4627 12.3789 41.2319 12.3789ZM51.7548 19H47.8876V8.09091H51.7868C52.8841 8.09091 53.8287 8.3093 54.6206 8.74609C55.4125 9.17933 56.0215 9.80256 56.4476 10.6158C56.8773 11.429 57.0922 12.402 57.0922 13.5348C57.0922 14.6712 56.8773 15.6477 56.4476 16.4645C56.0215 17.2812 55.4089 17.908 54.6099 18.3448C53.8145 18.7816 52.8627 19 51.7548 19ZM50.1941 17.0238H51.6589C52.3407 17.0238 52.9142 16.9031 53.3794 16.6616C53.8482 16.4165 54.1998 16.0384 54.4341 15.527C54.6721 15.0121 54.791 14.348 54.791 13.5348C54.791 12.7287 54.6721 12.07 54.4341 11.5586C54.1998 11.0472 53.85 10.6708 53.3848 10.4293C52.9196 10.1879 52.3461 10.0671 51.6642 10.0671H50.1941V17.0238ZM62.4548 19.1598C61.6274 19.1598 60.9118 18.984 60.3081 18.6325C59.708 18.2773 59.2446 17.7837 58.9179 17.1516C58.5912 16.516 58.4278 15.7791 58.4278 14.9411C58.4278 14.0959 58.5912 13.3572 58.9179 12.7251C59.2446 12.0895 59.708 11.5959 60.3081 11.2443C60.9118 10.8892 61.6274 10.7116 62.4548 10.7116C63.2822 10.7116 63.996 10.8892 64.5961 11.2443C65.1998 11.5959 65.665 12.0895 65.9917 12.7251C66.3184 13.3572 66.4818 14.0959 66.4818 14.9411C66.4818 15.7791 66.3184 16.516 65.9917 17.1516C65.665 17.7837 65.1998 18.2773 64.5961 18.6325C63.996 18.984 63.2822 19.1598 62.4548 19.1598ZM62.4655 17.402C62.8419 17.402 63.1562 17.2955 63.4083 17.0824C63.6604 16.8658 63.8504 16.571 63.9782 16.1982C64.1096 15.8253 64.1753 15.4009 64.1753 14.9251C64.1753 14.4492 64.1096 14.0249 63.9782 13.652C63.8504 13.2791 63.6604 12.9844 63.4083 12.7678C63.1562 12.5511 62.8419 12.4428 62.4655 12.4428C62.0855 12.4428 61.7659 12.5511 61.5067 12.7678C61.251 12.9844 61.0574 13.2791 60.926 13.652C60.7982 14.0249 60.7343 14.4492 60.7343 14.9251C60.7343 15.4009 60.7982 15.8253 60.926 16.1982C61.0574 16.571 61.251 16.8658 61.5067 17.0824C61.7659 17.2955 62.0855 17.402 62.4655 17.402ZM71.654 19.1598C70.816 19.1598 70.0951 18.9822 69.4914 18.6271C68.8912 18.2685 68.4296 17.7713 68.1064 17.1357C67.7868 16.5 67.627 15.7685 67.627 14.9411C67.627 14.103 67.7886 13.3679 68.1118 12.7358C68.4385 12.1001 68.9019 11.6048 69.502 11.2496C70.1022 10.891 70.816 10.7116 71.6434 10.7116C72.3572 10.7116 72.9822 10.8413 73.5184 11.1005C74.0546 11.3597 74.479 11.7237 74.7915 12.1925C75.104 12.6612 75.2762 13.2116 75.3081 13.8438H73.1668C73.1064 13.4354 72.9466 13.1069 72.6874 12.8583C72.4317 12.6062 72.0961 12.4801 71.6807 12.4801C71.3291 12.4801 71.0219 12.576 70.7591 12.7678C70.4999 12.956 70.2975 13.2312 70.1519 13.5934C70.0063 13.9556 69.9335 14.3942 69.9335 14.9091C69.9335 15.4311 70.0045 15.875 70.1466 16.2408C70.2922 16.6065 70.4964 16.8853 70.7591 17.0771C71.0219 17.2688 71.3291 17.3647 71.6807 17.3647C71.9399 17.3647 72.1725 17.3114 72.3785 17.2049C72.588 17.0984 72.7602 16.9439 72.8952 16.7415C73.0336 16.5355 73.1242 16.2887 73.1668 16.0011H75.3081C75.2726 16.6261 75.1022 17.1765 74.7968 17.6523C74.4949 18.1246 74.0777 18.494 73.545 18.7603C73.0123 19.0266 72.382 19.1598 71.654 19.1598ZM83.5685 13.1513L81.4911 13.2791C81.4556 13.1016 81.3793 12.9418 81.2621 12.7997C81.1449 12.6541 80.9904 12.5387 80.7987 12.4535C80.6104 12.3647 80.3849 12.3203 80.1222 12.3203C79.7706 12.3203 79.4741 12.3949 79.2326 12.544C78.9911 12.6896 78.8704 12.8849 78.8704 13.13C78.8704 13.3253 78.9485 13.4904 79.1048 13.6254C79.261 13.7603 79.5291 13.8686 79.9091 13.9503L81.3899 14.2486C82.1854 14.4119 82.7784 14.6747 83.169 15.0369C83.5597 15.3991 83.755 15.875 83.755 16.4645C83.755 17.0007 83.5969 17.4712 83.2809 17.8761C82.9684 18.2809 82.5387 18.5969 81.9918 18.8242C81.4485 19.0479 80.8217 19.1598 80.1115 19.1598C79.0284 19.1598 78.1655 18.9343 77.5227 18.4833C76.8835 18.0288 76.5089 17.4109 76.3988 16.6296L78.6307 16.5124C78.6982 16.8427 78.8615 17.0948 79.1207 17.2688C79.38 17.4393 79.712 17.5245 80.1168 17.5245C80.5146 17.5245 80.8342 17.4482 81.0756 17.2955C81.3207 17.1392 81.445 16.9386 81.4485 16.6935C81.445 16.4876 81.358 16.3189 81.1875 16.1875C81.017 16.0526 80.7543 15.9496 80.3991 15.8786L78.9822 15.5962C78.1832 15.4364 77.5884 15.1594 77.1978 14.7653C76.8107 14.3711 76.6172 13.8686 76.6172 13.2578C76.6172 12.7322 76.7592 12.2795 77.0433 11.8995C77.331 11.5195 77.734 11.2266 78.2525 11.0206C78.7745 10.8146 79.3853 10.7116 80.0849 10.7116C81.1183 10.7116 81.9315 10.93 82.5245 11.3668C83.1211 11.8036 83.4691 12.3984 83.5685 13.1513Z"
+      fill="#F0F0F0"
+    ></path>
+    <defs>
+      <linearGradient
+        id="paint0_linear_673_240"
+        x1="15.9275"
+        y1="17.0585"
+        x2="34.7074"
+        y2="17.0585"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0"></stop>
+        <stop offset="0.6" stopColor="white"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_673_240"
+        x1="18.5626"
+        y1="28.1876"
+        x2="32.3371"
+        y2="32.5628"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0"></stop>
+        <stop offset="0.6" stopColor="white"></stop>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export { KadenaDocsLogo };

packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx

@@ -14,11 +14,16 @@ export const FooterLink: FC<IFooterLinkProps> = ({ children }) => {
   };
 
   const clones = React.Children.map(children, (child) => {
-    // @ts-ignore
-    return React.cloneElement(child, {
-      classNames: [linkClass],
-      style: colorStyles,
-    });
+    return React.cloneElement(
+      child as React.ReactElement<
+        any,
+        string | React.JSXElementConstructor<any>
+      >,
+      {
+        className: [linkClass],
+        style: colorStyles,
+      },
+    );
   });
 
   return (

packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts

@@ -0,0 +1,132 @@
+import { sprinkles, vars } from '../../styles';
+
+import { style } from '@vanilla-extract/css';
+
+export const containerClass = style([
+  sprinkles({
+    alignItems: 'stretch',
+    backgroundColor: '$gray90',
+    color: '$gray40',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    height: '$16',
+    justifyContent: 'flex-start',
+    overflow: 'hidden',
+    position: 'relative',
+  }),
+  {
+    alignItems: 'center',
+    selectors: {
+      '&:hover': {
+        textDecoration: 'none',
+      },
+      '&:active': {
+        color: vars.colors.$negativeContrast,
+      },
+    },
+  },
+]);
+
+export const logoClass = style([
+  sprinkles({
+    display: 'flex',
+    marginLeft: '$3',
+  }),
+  {
+    zIndex: 1,
+  },
+]);
+
+export const navWrapperClass = style([
+  sprinkles({
+    alignItems: 'stretch',
+    display: 'flex',
+    justifyContent: 'center',
+  }),
+]);
+
+export const navListClass = style([
+  sprinkles({
+    alignItems: 'stretch',
+    display: 'flex',
+    justifyContent: 'center',
+  }),
+  {
+    listStyle: 'none',
+    zIndex: 1,
+  },
+]);
+
+export const linkClass = style([
+  sprinkles({
+    alignItems: 'center',
+    borderRadius: '$sm',
+    color: '$gray40',
+    display: 'flex',
+    fontSize: '$sm',
+    fontWeight: '$semiBold',
+    marginRight: '$6',
+    marginX: '$1',
+    textDecoration: 'none',
+  }),
+  {
+    padding: `${vars.sizes.$1} ${vars.sizes.$2}`,
+    transition: 'background 0.1s ease, color 0.1s ease',
+  },
+  {
+    selectors: {
+      '&:active': {
+        color: vars.colors.$gray90,
+        textDecoration: 'none',
+      },
+      '&:hover': {
+        color: vars.colors.$white,
+        textDecoration: 'none',
+      },
+      '&:focus-visible': {
+        color: vars.colors.$blue40,
+        textDecoration: 'none',
+      },
+    },
+  },
+]);
+
+export const activeLinkClass = style([
+  sprinkles({
+    backgroundColor: '$white',
+    color: '$gray90',
+  }),
+  {
+    selectors: {
+      '&:hover': {
+        color: vars.colors.$gray90,
+        textDecoration: 'none',
+      },
+      '&:focus-visible': {
+        background: vars.colors.$blue40,
+        color: vars.colors.$gray90,
+        textDecoration: 'none',
+      },
+    },
+  },
+]);
+
+export const childrenClass = style([
+  sprinkles({
+    display: 'flex',
+    marginLeft: 'auto',
+    marginRight: '$3',
+  }),
+]);
+
+export const glowClass = style([
+  {
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    transition: 'all 0.3s ease',
+    zIndex: 0,
+  },
+]);