From 3c903b38cebf195c39dd4d23de6cdc8a32c15656 Mon Sep 17 00:00:00 2001
From: Dave <davepeck@gmail.com>
Date: Wed, 24 Jan 2024 14:57:14 -0800
Subject: [PATCH] Basic share button

---
 src/components/More.tsx        |  8 ++++----
 src/components/ShareButton.tsx | 29 +++++++++++++++++++++++++++++
 src/pages/index.astro          |  5 ++---
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ShareButton.tsx

diff --git a/src/components/More.tsx b/src/components/More.tsx
index 509eb13..2b928a6 100644
--- a/src/components/More.tsx
+++ b/src/components/More.tsx
@@ -128,7 +128,7 @@ const More: React.FC = () => {
         </label>
         <select
           id="home-state"
-          className="flex-grow"
+          className="flex-grow appearance-none border-2 rounded-none px-2"
           value={homeSt}
           onChange={(e) => setHomeSt(e.target.value)}
         >
@@ -166,9 +166,9 @@ const More: React.FC = () => {
 
       {/* Show the result */}
       <p className="text-2x font-bold">
-        {homeSt && schoolSt
-          ? SELECTION_DESCRIPTION[selection](homeSt, schoolSt)
-          : "(choose your states)"}
+        {homeSt &&
+          schoolSt &&
+          SELECTION_DESCRIPTION[selection](homeSt, schoolSt)}
       </p>
 
       {/* Link (or links) to vote.gov */}
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
new file mode 100644
index 0000000..07c6426
--- /dev/null
+++ b/src/components/ShareButton.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+
+const ShareButton: React.FC = () => {
+  const [showShare, setShowShare] = useState<boolean>(false);
+
+  useEffect(() => {
+    // @ts-ignore-next-line
+    setShowShare(window.navigator && window.navigator.share);
+  }, []);
+
+  if (!showShare) return null;
+
+  return (
+    <button
+      className="bg-black py-4 px-8 text-white text-xl font-bold hover:bg-red-500"
+      onClick={() => {
+        navigator.share({
+          title: "Count More",
+          text: "Every vote counts... but some count more. Find out where *your* vote counts more in 2024.",
+          url: "https://countmore.us",
+        });
+      }}
+    >
+      Share
+    </button>
+  );
+};
+
+export default ShareButton;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f638186..8f9df48 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import More from "../components/More.tsx";
+import ShareButton from "../components/ShareButton.tsx";
 ---
 
 <Layout title="Count More">
@@ -12,9 +13,7 @@ import More from "../components/More.tsx";
         votes count the same. Find out where your vote counts more.
       </h3>
       <div>
-        <button class="bg-black py-4 px-8 text-white text-xl font-bold"
-          >Share</button
-        >
+        <ShareButton client:load />
       </div>
     </div>
     <div class="w-full md:w-2/3">