Recipe card icons and refactoring.

src/components/recipe-card/RecipeCard.tsx

@@ -17,27 +17,26 @@ const RecipeCard = ({
 }: RecipeCardProps) => {
     return (
         <article>
-            {mainImageUrl ? <img src={mainImageUrl} /> : null}
+            <img src={mainImageUrl} />
             <div className="title-star-count-container">
                 <h1>{title}</h1>
-                {starCount ? (
                 <span>
                     <FontAwesomeIcon icon="star" size="sm" />
                     {starCount}
                 </span>
-                ) : null}
             </div>
             <div className="owner-container">
-                {ownerUsername ? <p>{ownerUsername}</p> : null}
+                <span>
+                    <FontAwesomeIcon icon="user" />
+                    {ownerUsername}
+                </span>
             </div>
             <div className="is-public-container">
-                {isPublic !== undefined ? (
+                {isPublic ? (
-                    isPublic ? (
                     <FontAwesomeIcon icon="globe" size="sm" />
                 ) : (
                     <FontAwesomeIcon icon="lock" size="sm" />
-                    )
+                )}
-                ) : null}
             </div>
         </article>
     )

src/main.tsx

@@ -4,6 +4,11 @@ import { routeTree } from './routeTree.gen'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AuthProvider, useAuth } from './auth'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+// Font-Awesome: load icons
+library.add(fas)
 
 // Create router
 const router = createRouter({