Basic share button

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 */}

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;

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">