add share buttons

SU-SWS · May 10, 2024 · 2924aa8 · 2924aa8
1 parent 29a318e
commit 2924aa8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/src/components/elements/favorites-list.tsx b/src/components/elements/favorites-list.tsx
@@ -1,10 +1,56 @@
 "use client";
 
 import useFavorites from "@lib/hooks/useFavorites";
-import {ChatBubbleLeftEllipsisIcon, ClipboardDocumentIcon, EnvelopeIcon, HeartIcon} from "@heroicons/react/24/outline";
+import { ChatBubbleLeftEllipsisIcon, ClipboardDocumentIcon, EnvelopeIcon, HeartIcon} from "@heroicons/react/24/outline";
 import {useIsClient} from "usehooks-ts";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 
+const ShareButtons = () => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      alert("URL copied to clipboard!");
+    } catch (error) {
+      console.error("Failed to copy URL: ", error);
+      alert("Failed to copy URL. Please try again.");
+    }
+  };
+
+  const handleSendEmail = () => {
+    const subject = "Check out these summer courses!";
+    const body = `Here is the link: ${window.location.href}`;
+    window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  };
+
+  const handleSendSMS = () => {
+    const body = `Check out this link: ${window.location.href}`;
+    window.location.href = `sms:?body=${encodeURIComponent(body)}`;
+  };
+
+  return (
+    <>
+      <button className="flex flex-col items-center hocus:underline" onClick={handleSendSMS}>
+        <span className="bg-spirited-dark rounded-full p-5 mb-4">
+          <ChatBubbleLeftEllipsisIcon width={30} className="text-white" />
+        </span>
+        Text
+      </button>
+      <button className="flex flex-col items-center hocus:underline" onClick={handleSendEmail}>
+        <span className="bg-spirited-dark rounded-full p-5 mb-4">
+          <EnvelopeIcon width={30} className="text-white" />
+        </span>
+        Email
+      </button>
+      <button className="flex flex-col items-center hocus:underline" onClick={handleCopy}>
+        <span className="bg-spirited-dark rounded-full p-5 mb-4">
+          <ClipboardDocumentIcon width={30} className="text-white" />
+        </span>
+        Copy
+      </button>
+    </>
+  );
+};
+
 
 const FavoritesList = () => {
   const { favs, removeFav } = useFavorites();
@@ -16,22 +62,22 @@ const FavoritesList = () => {
 
   return (
     <div className="shadow border pt-12 pb-24 px-24">
-      <div className="font-normal type-2 text-center rs-mb-1">Favorites</div>
+      <div className="font-normal type-2 text-center rs-mb-1">Favorites List</div>
       {favs.length > 0 ?
         <>
           <ul className="list-none pl-0">
             {favs.map(fav => 
               <li key={fav.uuid} className="flex flex-row items-start gap-5">
-                <button type="button" onClick={() => removeFavorite(fav.uuid)}>
-                  <XMarkIcon width={24} className="mt-2" />
+                <button type="button" onClick={() => removeFavorite(fav.uuid)} className="group">
+                  <XMarkIcon width={24} className="mt-2 group-hocus:text-spirited-dark" />
                   <span className="sr-only">Remove &quot;{fav.title}&quot; from favorites</span>
                 </button>
-                <p>{fav.title}</p>
-                <p>Units {fav.units}</p>
+                <p className="font-roboto">{fav.title}</p>
+                <p className="ml-auto shrink-0">Units {fav.units}</p>
               </li>
             )}
           </ul>
-          <div className="border-t border-archway-dark w-full flex">
+          <div className="border-t border-archway-dark w-full flex pb-12">
             <div className="ml-auto mt-3">Total units {totalUnits}</div>
           </div>
         </>
@@ -43,25 +89,7 @@ const FavoritesList = () => {
         </div>
       }
       <div className="mt-12 flex flex-row justify-between">
-        {/* Shareable options: Text, Email, Copy Link */}
-        <button className="flex flex-col items-center hocus:underline">
-          <span className="bg-spirited-dark rounded-full p-5 mb-4">
-            <ChatBubbleLeftEllipsisIcon width={30} className="text-white" />
-          </span>
-          Text
-        </button>
-        <button className="flex flex-col items-center hocus:underline">
-          <span className="bg-spirited-dark rounded-full p-5 mb-4">
-            <EnvelopeIcon width={30} className="text-white" />
-          </span>
-          Email
-        </button>
-        <button className="flex flex-col items-center hocus:underline">
-          <span className="bg-spirited-dark rounded-full p-5 mb-4">
-            <ClipboardDocumentIcon width={30} className="text-white" />
-          </span>
-          Copy
-        </button>
+        <ShareButtons />
       </div>
     </div>
   );

diff --git a/src/components/paragraphs/sum-course-filter/course-filtering-form.tsx b/src/components/paragraphs/sum-course-filter/course-filtering-form.tsx
@@ -15,6 +15,7 @@ import {RefinementListItem} from "instantsearch.js/es/connectors/refinement-list
 import {clsx} from "clsx";
 import {AlgoliaHit} from "@components/algolia-results/default";
 import SummerCourse from "@components/algolia-results/summer-course/summer-course";
+import FavoritesList from "@components/elements/favorites-list";
 
 type Props = {
   appId: string
@@ -197,7 +198,9 @@ const SearchForm = () => {
           </Button>
         </form>
 
-        <H2 className="order-first">Favorites List</H2>
+        <div className="order-first rs-mb-2">
+          <FavoritesList />
+        </div>
       </div>
       <div className="lg:float-right lg:ml-20 lg:w-[calc(75%-5rem)]">
         <HitList/>