Refactoring of components and styling of full recipe page.

src/api/getRecipe.ts

@@ -40,7 +40,8 @@ const getRecipe = async ({
             ownerUsername,
             starCount,
             viewerCount,
-            mainImage: rawMainImage
+            mainImage: rawMainImage,
+            isPublic
         } = (await response.json()) as RawFullRecipeView
         return {
             id,
@@ -53,7 +54,8 @@ const getRecipe = async ({
             ownerUsername,
             starCount,
             viewerCount,
-            mainImage: toImageView(rawMainImage)
+            mainImage: toImageView(rawMainImage),
+            isPublic
         }
     } else if (response.status === 404) {
         throw notFound()

src/api/types/FullRecipeView.ts

@@ -12,6 +12,7 @@ export interface RawFullRecipeView {
     starCount: number
     viewerCount: number
     mainImage: RawImageView
+    isPublic: boolean
 }
 
 interface FullRecipeView {
@@ -26,6 +27,7 @@ interface FullRecipeView {
     starCount: number
     viewerCount: number
     mainImage: ImageView
+    isPublic: boolean
 }
 
 export default FullRecipeView

src/components/recipe-card/RecipeCard.tsx

@@ -1,6 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import classes from './recipe-card.module.css'
 import { Link } from '@tanstack/react-router'
+import RecipeVisibilityIcon from '../recipe-visibility-icon/RecipeVisibilityIcon'
+import StarCount from '../star-count/StarCount'
+import UserIconAndName from '../user-icon-and-name/UserIconAndName'
+import classes from './recipe-card.module.css'
 
 export interface RecipeCardProps {
     title: string
@@ -49,28 +51,11 @@ const RecipeCard = ({
                     >
                         <h1 className={classes.title}>{title}</h1>
                     </Link>
-                    <span className={classes.starInfo}>
+                    <StarCount count={starCount} />
-                        <FontAwesomeIcon
-                            icon="star"
-                            className={classes.star}
-                            size="sm"
-                        />
-                        {starCount}
-                    </span>
                 </div>
                 <div className={classes.infoRow}>
-                    <span className={classes.userInfo}>
+                    <UserIconAndName username={ownerUsername} />
-                        <FontAwesomeIcon
+                    <RecipeVisibilityIcon isPublic={isPublic} />
-                            icon="user"
-                            className={classes.userIcon}
-                        />
-                        {ownerUsername}
-                    </span>
-                    {isPublic ? (
-                        <FontAwesomeIcon icon="globe" size="sm" />
-                    ) : (
-                        <FontAwesomeIcon icon="lock" size="sm" />
-                    )}
                 </div>
             </div>
         </article>

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

@@ -23,22 +23,3 @@
     margin-block: 0;
     font-size: 18px;
 }
-
-.star-info {
-    display: flex;
-    column-gap: 5px;
-    align-items: center;
-}
-
-.star {
-    color: var(--primary-yellow);
-}
-
-.user-info {
-    display: flex;
-    column-gap: 5px;
-}
-
-.user-icon {
-    color: var(--primary-red);
-}

src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx

@@ -0,0 +1,23 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './recipe-visibility-icon.module.css'
+
+export interface RecipeVisibilityIconProps {
+    isPublic: boolean
+}
+
+const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) =>
+    isPublic ? (
+        <FontAwesomeIcon
+            icon="globe"
+            className={classes.recipeVisibilityIcon}
+            size="sm"
+        />
+    ) : (
+        <FontAwesomeIcon
+            icon="lock"
+            className={classes.recipeVisibilityIcon}
+            size="sm"
+        />
+    )
+
+export default RecipeVisibilityIcon

src/components/recipe-visibility-icon/recipe-visibility-icon.module.css

@@ -0,0 +1,3 @@
+.recipe-visibility-icon {
+    color: var(--primary-red);
+}

src/components/star-count/StarCount.tsx

@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './star-count.module.css'
+
+export interface StarCountProps {
+    count: number
+}
+
+const StarCount = ({ count }: StarCountProps) => (
+    <span className={classes.starInfo}>
+        <FontAwesomeIcon icon="star" className={classes.star} size="sm" />
+        {count}
+    </span>
+)
+
+export default StarCount

src/components/star-count/star-count.module.css

@@ -0,0 +1,9 @@
+.star-info {
+    display: flex;
+    column-gap: 5px;
+    align-items: center;
+}
+
+.star {
+    color: var(--primary-yellow);
+}

src/components/user-icon-and-name/UserIconAndName.tsx

@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './user-icon-and-name.module.css'
+
+export interface UserIconAndNameProps {
+    username: string
+}
+
+const UserIconAndName = ({ username }: UserIconAndNameProps) => (
+    <span className={classes.userInfo}>
+        <FontAwesomeIcon icon="user" className={classes.userIcon} />
+        {username}
+    </span>
+)
+
+export default UserIconAndName

src/components/user-icon-and-name/user-icon-and-name.module.css

@@ -0,0 +1,8 @@
+.user-info {
+    display: flex;
+    column-gap: 5px;
+}
+
+.user-icon {
+    color: var(--primary-red);
+}

src/pages/recipe/Recipe.tsx

@@ -1,4 +1,8 @@
 import FullRecipeView from '../../api/types/FullRecipeView'
+import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon'
+import StarCount from '../../components/star-count/StarCount'
+import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName'
+import classes from './recipe.module.css'
 
 export interface RecipeProps {
     recipe: FullRecipeView
@@ -6,10 +10,20 @@ export interface RecipeProps {
 
 const Recipe = ({ recipe }: RecipeProps) => {
     return (
-        <article>
+        <div className={classes.fullRecipeContainer}>
+            <article className={classes.fullRecipe}>
+                <img src={recipe.mainImage.url} className={classes.mainImage} />
+                <div className={classes.infoRow}>
                     <h1>{recipe.title}</h1>
+                    <StarCount count={recipe.starCount} />
+                </div>
+                <div className={classes.infoRow}>
+                    <UserIconAndName username={recipe.ownerUsername} />
+                    <RecipeVisibilityIcon isPublic={recipe.isPublic} />
+                </div>
                 <div dangerouslySetInnerHTML={{ __html: recipe.text }} />
             </article>
+        </div>
     )
 }
 

src/pages/recipe/recipe.module.css

@@ -0,0 +1,19 @@
+.full-recipe-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+}
+
+.full-recipe {
+    max-width: 600px;
+}
+
+.full-recipe .main-image {
+    width: 100%;
+}
+
+.full-recipe .info-row {
+    display: flex;
+    justify-content: space-between;
+}