Added basic styling to RecipeCard.

src/components/recipe-card/RecipeCard.tsx

@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './recipe-card.module.css'
 
 export interface RecipeCardProps {
     title: string
@@ -18,22 +19,23 @@ const RecipeCard = ({
     isPublic
 }: RecipeCardProps) => {
     return (
-        <article>
-            <img src={mainImageUrl} alt={mainImageAlt} title={mainImageAlt} />
-            <div className="title-star-count-container">
-                <h1>{title}</h1>
+        <article className={classes.recipeCard}>
+            <img
+                className={classes.recipeImage}
+                src={mainImageUrl}
+                alt={mainImageAlt}
+                title={mainImageAlt}
+            />
+            <div className={classes.infoContainer}>
+                <h1 className={classes.title}>{title}</h1>
                 <span>
                     <FontAwesomeIcon icon="star" size="sm" />
                     {starCount}
                 </span>
-            </div>
-            <div className="owner-container">
                 <span>
                     <FontAwesomeIcon icon="user" />
                     {ownerUsername}
                 </span>
-            </div>
-            <div className="is-public-container">
                 {isPublic ? (
                     <FontAwesomeIcon icon="globe" size="sm" />
                 ) : (

src/components/recipe-card/recipe-card.module.css

@@ -0,0 +1,18 @@
+.recipe-card {
+    max-width: 400px;
+    border: 1px solid black;
+}
+
+.recipe-image {
+    max-width: 100%;
+}
+
+.info-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: baseline;
+}
+
+.title {
+    margin-block: 0;
+}

vite.config.ts

@@ -4,5 +4,10 @@ import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), TanStackRouterVite()]
+    plugins: [react(), TanStackRouterVite()],
+    css: {
+        modules: {
+            localsConvention: 'camelCaseOnly'
+        }
+    }
 })