wip: update

ogcio · May 29, 2024 · 91bab02 · 91bab02
1 parent 15dcd25
commit 91bab02
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
@@ -5,6 +5,7 @@ import { Text } from "@/components/typography/text";
 import { Button } from "@/components/form/button";
 import heroImage from "../../public/hero.png";
 import { config } from "@/lib/config";
+import { RightArrowIcon } from "@/components/icons/right-arrow-icon";
 
 function Prose({
   as: As = "div",
@@ -128,7 +129,9 @@ export default function HomePage() {
             Design System Building Block empowers your department to create
             cohesive digital experiences effortlessly.
           </Text>
-          <Button href={config.signUpFormUrl}>Sign up to learn more</Button>
+          <Button href={config.signUpFormUrl} icon={<RightArrowIcon />}>
+            Sign up to learn more
+          </Button>
         </Prose>
         <div>
           <Image
@@ -147,7 +150,9 @@ export default function HomePage() {
           or learn more about how the Design System building block can empower
           your public sector department.
         </Text>
-        <Button href={config.signUpFormUrl}>Sign up to learn more</Button>
+        <Button href={config.signUpFormUrl} icon={<RightArrowIcon />}>
+          Sign up to learn more
+        </Button>
       </Prose>
     </article>
   );

diff --git a/apps/docs/src/components/form/button.tsx b/apps/docs/src/components/form/button.tsx
@@ -1,19 +1,29 @@
+import { cn } from "@/lib/cn";
+
 export function Button({
   href,
   children,
+  icon,
 }: {
   href: string;
   children: React.ReactNode;
+  icon?: React.ReactNode;
 }) {
   return (
     <a
       href={href}
-      className="text-center sm:text-left bg-emerald-800 hover:bg-emerald-900 text-md text-white no-underline rounded p-xl py-sm cursor-pointer block sm:inline-block"
+      className={cn(
+        "bg-emerald-800 hover:bg-emerald-900 text-md text-white",
+        "no-underline rounded p-xl py-sm cursor-pointer block sm:inline-block"
+      )}
       style={{
         boxShadow: "0 2px 0 #0b0c0c", // TODO: use shadow token
       }}
     >
-      {children}
+      <span className="flex gap-lg items-center justify-center sm:justify-start">
+        {children}
+        {icon}
+      </span>
     </a>
   );
 }
diff --git a/apps/docs/src/components/icons/right-arrow-icon.tsx b/apps/docs/src/components/icons/right-arrow-icon.tsx
@@ -0,0 +1,15 @@
+export function RightArrowIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-[16px] h-[16px] mt-[2px]"
+    >
+      <path
+        d="M8 0.5L6.59 1.91L12.17 7.5H0V9.5H12.17L6.59 15.09L8 16.5L16 8.5L8 0.5Z"
+        fill="white"
+      />
+    </svg>
+  );
+}