Share button as an icon on request page

interledger · Apr 27, 2024 · 78d1faf · 78d1faf
1 parent 0288f74
commit 78d1faf
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
@@ -134,3 +134,21 @@ export const BackNav = (props: SVGProps<SVGSVGElement>) => {
     </svg>
   );
 };
+
+export const Share = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="20"
+      viewBox="0 0 18 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M15 20C14.1667 20 13.4583 19.7083 12.875 19.125C12.2917 18.5417 12 17.8333 12 17C12 16.8833 12.0083 16.7623 12.025 16.637C12.0417 16.5123 12.0667 16.4 12.1 16.3L5.05 12.2C4.76667 12.45 4.45 12.6457 4.1 12.787C3.75 12.929 3.38333 13 3 13C2.16667 13 1.45833 12.7083 0.875 12.125C0.291667 11.5417 0 10.8333 0 10C0 9.16667 0.291667 8.45833 0.875 7.875C1.45833 7.29167 2.16667 7 3 7C3.38333 7 3.75 7.07067 4.1 7.212C4.45 7.354 4.76667 7.55 5.05 7.8L12.1 3.7C12.0667 3.6 12.0417 3.48767 12.025 3.363C12.0083 3.23767 12 3.11667 12 3C12 2.16667 12.2917 1.45833 12.875 0.875C13.4583 0.291667 14.1667 0 15 0C15.8333 0 16.5417 0.291667 17.125 0.875C17.7083 1.45833 18 2.16667 18 3C18 3.83333 17.7083 4.54167 17.125 5.125C16.5417 5.70833 15.8333 6 15 6C14.6167 6 14.25 5.929 13.9 5.787C13.55 5.64567 13.2333 5.45 12.95 5.2L5.9 9.3C5.93333 9.4 5.95833 9.51233 5.975 9.637C5.99167 9.76233 6 9.88333 6 10C6 10.1167 5.99167 10.2373 5.975 10.362C5.95833 10.4873 5.93333 10.6 5.9 10.7L12.95 14.8C13.2333 14.55 13.55 14.354 13.9 14.212C14.25 14.0707 14.6167 14 15 14C15.8333 14 16.5417 14.2917 17.125 14.875C17.7083 15.4583 18 16.1667 18 17C18 17.8333 17.7083 18.5417 17.125 19.125C16.5417 19.7083 15.8333 20 15 20ZM15 4C15.2833 4 15.5207 3.90433 15.712 3.713C15.904 3.521 16 3.28333 16 3C16 2.71667 15.904 2.479 15.712 2.287C15.5207 2.09567 15.2833 2 15 2C14.7167 2 14.4793 2.09567 14.288 2.287C14.096 2.479 14 2.71667 14 3C14 3.28333 14.096 3.521 14.288 3.713C14.4793 3.90433 14.7167 4 15 4ZM3 11C3.28333 11 3.521 10.904 3.713 10.712C3.90433 10.5207 4 10.2833 4 10C4 9.71667 3.90433 9.479 3.713 9.287C3.521 9.09567 3.28333 9 3 9C2.71667 9 2.479 9.09567 2.287 9.287C2.09567 9.479 2 9.71667 2 10C2 10.2833 2.09567 10.5207 2.287 10.712C2.479 10.904 2.71667 11 3 11ZM15 18C15.2833 18 15.5207 17.904 15.712 17.712C15.904 17.5207 16 17.2833 16 17C16 16.7167 15.904 16.4793 15.712 16.288C15.5207 16.096 15.2833 16 15 16C14.7167 16 14.4793 16.096 14.288 16.288C14.096 16.4793 14 16.7167 14 17C14 17.2833 14.096 17.5207 14.288 17.712C14.4793 17.904 14.7167 18 15 18Z"
+        fill="#475569"
+      />
+    </svg>
+  );
+};
diff --git a/app/components/ui/shareButton.tsx b/app/components/ui/shareButton.tsx
@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { Button } from "./button";
+import { Share } from "../icons";
+
+export interface ShareButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  url: string;
+  size?: string;
+  variant?: "default" | "outline" | "input";
+}
+
+export const ShareButton = forwardRef<HTMLButtonElement, ShareButtonProps>(
+  ({ url, size, variant, ...props }, ref) => {
+    return (
+      <Button
+        size="sm"
+        variant={variant}
+        onClick={(e: any) => {
+          e.preventDefault();
+          navigator.share({
+            title: "Payment link",
+            text: "Interledger Pay payment link:",
+            url: url,
+          });
+        }}
+        {...props}
+      >
+        {" "}
+        <div className="flex items-center justify-center">
+          <Share className="m-0.5 h-5 w-5" />
+        </div>
+      </Button>
+    );
+  }
+);
+ShareButton.displayName = "ShareButton";
diff --git a/app/routes/shareRequest.tsx b/app/routes/shareRequest.tsx
@@ -7,6 +7,7 @@ import { BackNav } from "~/components/icons";
 import { Button } from "~/components/ui/button";
 import { CopyButton } from "~/components/ui/copyButton";
 import { Field } from "~/components/ui/form/form";
+import { ShareButton } from "~/components/ui/shareButton";
 import { destroySession, getSession } from "~/session";
 import { formatAmount, formatDate } from "~/utils/helpers";
 
@@ -89,24 +90,17 @@ export default function ShareRequest() {
                     value={data.paymentUrl}
                     variant="input"
                   ></CopyButton>
+                  <ShareButton
+                    aria-label="share payment link"
+                    className="h-7 w-7"
+                    url={data.paymentUrl}
+                    size="sm"
+                    variant="input"
+                  ></ShareButton>
                 </>
               }
             ></Field>
-            <Button
-              variant="outline"
-              size="xl"
-              type="button"
-              onClick={() => {
-                navigator.share({
-                  title: "Payment link",
-                  text: "Interledger Pay payment link:",
-                  url: data.paymentUrl,
-                });
-              }}
-            >
-              Share payment link
-            </Button>
-            <Button type="submit" className="mt-8" size="xl">
+            <Button type="submit" size="xl">
               Close
             </Button>
           </Form>