Change markdown renderer components margins

T1LT · Jan 19, 2024 · 08d0266 · 08d0266
1 parent 670047a
commit 08d0266
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 12 deletions.
diff --git a/app/(recipes)/recipes/[item]/page.tsx b/app/(recipes)/recipes/[item]/page.tsx
@@ -93,15 +93,11 @@ export default async function RecipeItem({
       </div>
       <div>
         <h3 className="font-bold text-xl">Ingredients</h3>
-        <div className="mt-2">
-          <MarkdownRenderer>{recipe.ingredients}</MarkdownRenderer>
-        </div>
+        <MarkdownRenderer>{recipe.ingredients}</MarkdownRenderer>
       </div>
       <div>
         <h3 className="font-bold text-xl">Procedure</h3>
-        <div className="mt-2">
-          <MarkdownRenderer>{recipe.procedure}</MarkdownRenderer>
-        </div>
+        <MarkdownRenderer>{recipe.procedure}</MarkdownRenderer>
       </div>
     </div>
   );

diff --git a/app/(recipes)/recipes/like-button.tsx b/app/(recipes)/recipes/like-button.tsx
@@ -19,7 +19,6 @@ export default function LikeButton({
     userLiked,
     (state, _) => !state,
   );
-
   const handleLike = async () => {
     setOptimisticUserLiked(!userLiked);
     await changeLike(recipeId, likes, optimisticUserLiked);

diff --git a/components/markdown-renderer.tsx b/components/markdown-renderer.tsx
@@ -23,23 +23,23 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
           p: ({ children }) => <p className="my-2">{children}</p>,
           img: () => null,
           ul: ({ children }) => (
-            <ul className="list-disc flex flex-col gap-2 list-inside">
+            <ul className="list-disc flex flex-col gap-2 list-inside my-2">
               {children}
             </ul>
           ),
           ol: ({ children }) => (
-            <ol className="list-decimal flex flex-col gap-2 list-inside">
+            <ol className="list-decimal flex flex-col gap-2 list-inside my-2">
               {children}
             </ol>
           ),
           h1: ({ children }) => (
-            <h1 className="font-bold text-lg">{children}</h1>
+            <h1 className="font-bold text-lg my-1">{children}</h1>
           ),
           h2: ({ children }) => (
-            <h2 className="font-bold text-base">{children}</h2>
+            <h2 className="font-bold text-base my-1">{children}</h2>
           ),
           h3: ({ children }) => (
-            <h3 className="font-bold text-sm">{children}</h3>
+            <h3 className="font-bold text-sm my-1">{children}</h3>
           ),
         },
       }}