add favorite functionality

website/src/components/quickstartGuideCard/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "@docusaurus/Link";
 import styles from "./styles.module.css";
 import getIconType from "../../utils/get-icon-type";
@@ -32,17 +32,51 @@ export default function QuickstartGuideCard({ frontMatter }) {
 
 // Component that handles the information under the title on the quickstart guide page
 export function QuickstartGuideTitle({ frontMatter }) {
-  const { time_to_complete, tags, level, recently_updated } =
-    frontMatter;
+  const { id, time_to_complete, tags, level, recently_updated } = frontMatter;
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  useEffect(() => {
+    // Check if this guide is in favorites when component mounts
+    const favorites = JSON.parse(localStorage.getItem('favoriteGuides') || '[]');
+    setIsFavorite(favorites.includes(id));
+  }, [id]);
+
+  const toggleFavorite = () => {
+    const favorites = JSON.parse(localStorage.getItem('favoriteGuides') || '[]');
+
+    if (isFavorite) {
+      const newFavorites = favorites.filter(fav => fav !== id);
+      localStorage.setItem('favoriteGuides', JSON.stringify(newFavorites));
+    } else {
+      favorites.push(id);
+      localStorage.setItem('favoriteGuides', JSON.stringify(favorites));
+    }
+
+    setIsFavorite(!isFavorite);
+  };
 
   return (
     <div className={styles.infoContainer}>
-      {recently_updated && (
-        <span className={styles.recently_updated}>Updated</span>
-      )}
-      {time_to_complete && (
-        <span className={styles.time_to_complete}>{getSvgIcon('fa-clock')} {time_to_complete}</span>
-      )}
+      <div className={styles.leftInfo}>
+        <div>
+          <button 
+            onClick={toggleFavorite}
+            className={`${styles.favoriteButton} ${isFavorite ? styles.favorited : ''}`}
+            aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+          >
+
+            {getSvgIcon('fa-star-solid')}
+          </button>
+        </div>
+        {recently_updated && (
+          <span className={styles.recently_updated}>Updated</span>
+        )}
+        {time_to_complete && (
+          <span className={styles.time_to_complete}>
+            {getSvgIcon('fa-clock')} {time_to_complete}
+          </span>
+        )}
+      </div>
 
       {(tags || level) && (
         <div className={styles.tag_container}>

website/src/components/quickstartGuideCard/styles.module.css

@@ -119,6 +119,11 @@
   padding-left: 0;
 }
 
+.leftInfo {
+  display: flex;
+  align-items: center;
+}
+
 .infoContainer .tag_container {
   display: flex;
   flex-wrap: wrap;
@@ -171,3 +176,33 @@
     padding: 0;
   }
 }
+.favoriteButton {
+
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #ccc;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.favoriteButton svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.favoriteButton:hover {
+  color: var(  --color-green-blue);
+}
+
+.favoriteButton.favorited {
+  color: #ffd700;
+}
+
+
+

website/src/components/quickstartGuideList/index.js

@@ -65,6 +65,7 @@ function QuickstartList({ quickstartData }) {
   const [selectedFilters, setSelectedFilters] = useState({});
   const [searchInput, setSearchInput] = useState('');
   const location = useLocation();
+  const [favorites, setFavorites] = useState([]);
 
   // Replace individual filter states with a single object
   const getFilterOptions = (filterKey) => {
@@ -198,6 +199,15 @@ function QuickstartList({ quickstartData }) {
     }, {}) || {};
   }, [filteredData, selectedFilters, quickstartData]);
 
+  // Add this useEffect to load favorites
+  useEffect(() => {
+    const favoriteIds = JSON.parse(localStorage.getItem('favoriteGuides') || '[]');
+    const favoriteGuides = quickstartData.filter(guide => 
+      favoriteIds.includes(guide.data.id)
+    );
+    setFavorites(favoriteGuides);
+  }, [quickstartData]);
+
   return (
     <Layout>
       <Head>
@@ -249,6 +259,12 @@ function QuickstartList({ quickstartData }) {
               {Object.values(selectedFilters).every(selected => !selected?.length) ? (
                 // Show categorized view when no filters are selected
                 <>
+                  {favorites.length > 0 && (
+                    <GuideSection
+                      title="Favorites"
+                      guides={favorites}
+                    />
+                  )}
                   {CONFIG?.categories?.map((category) => (
                     <GuideSection
                       key={normalizeTitle(category.title)}

website/src/utils/get-svg-icon.js

@@ -70,6 +70,12 @@ export default function getSvgIcon(icon) {
           <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
         </svg>
       );
+    case icon.includes("fa-star"):
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+          <path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/>
+        </svg>
+      );
     default:
       return "";
   }