Add icons

js/components/FavoriteBar.js

@@ -1,9 +1,14 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
-import {Button} from 'reactstrap';
+import { Button } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons';
+import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons';
+import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons';
 
-export function FavoriteBar({teams}) {
+export function FavoriteBar({ teams }) {
     const [favorite, setFavorite] = useState(null);
     const [isVisible, setIsVisible] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         const savedFavorite = localStorage.getItem('favoriteTeam');
@@ -13,6 +18,7 @@ export function FavoriteBar({teams}) {
                 setFavorite(team);
             }
         }
+        setIsLoading(false);
     }, [teams]);
 
     const toggleFavorite = team => {
@@ -25,26 +31,36 @@ export function FavoriteBar({teams}) {
         }
     };
 
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
     return (
         <div>
-            <Button onClick={() => setIsVisible(!isVisible)}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
-                {isVisible ? 'Hide Favorite Bar' : 'Show Favorite Bar'}
+                <h2 style={{ marginRight: '10px' }}>Favorit:</h2>
-            </Button>
+                <p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
+                <Button onClick={() => setIsVisible(!isVisible)}>
+                    <FontAwesomeIcon icon={faHeartCirclePlus} />
+                </Button>
+            </div>
             {isVisible && (
                 <div className="favorite-bar">
-                    <h2>Favorite Team</h2>
-                    {favorite ? <p>{favorite.name}</p> : <p>No favorite team selected</p>}
                     <h3>All Teams</h3>
-                    <ul>
+                    <div>
                         {teams.map(team => (
-                            <li key={team.id}>
+                            <div key={team.id} style={{ display: 'flex', alignItems: 'center' }}>
-                                {team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
+                                <Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}>
-                                <Button onClick={() => toggleFavorite(team)}>
+                                    <FontAwesomeIcon
-                                    {favorite && favorite.id === team.id ? 'Remove from Favorites' : 'Add to Favorites'}
+                                        icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
+                                    />
                                 </Button>
-                            </li>
+                                <span>
+                                    {team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
+                                </span>
+                            </div>
                         ))}
-                    </ul>
+                    </div>
                 </div>
             )}
         </div>

package.json

@@ -13,6 +13,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@zeit/next-css": "^1.0.1",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",

yarn.lock

@@ -43,6 +43,39 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.7.2":
+  version "6.7.2"
+  resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
+  integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
+
+"@fortawesome/fontawesome-svg-core@^6.7.2":
+  version "6.7.2"
+  resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2"
+  integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-regular-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db"
+  integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-solid-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6"
+  integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/react-fontawesome@^0.2.2":
+  version "0.2.2"
+  resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"