Render partial details when available

dcramer · Dec 18, 2023 · 49d18c3 · 49d18c3
1 parent 7c570b0
commit 49d18c3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/apps/web/app/routes/bottles.$bottleId._index.tsx b/apps/web/app/routes/bottles.$bottleId._index.tsx
@@ -91,14 +91,16 @@ export default function BottleDetails() {
         </ClientOnly>
       </div>
 
-      {bottle.description && (
+      {(bottle.description || bottle.tastingNotes) && (
         <div className="my-6 px-3 md:px-0">
-          <div className="flex space-x-4">
-            <div className="prose prose-invert -mt-5 max-w-none flex-auto">
-              <Markdown content={bottle.description} />
+          {bottle.description && (
+            <div className="flex space-x-4">
+              <div className="prose prose-invert -mt-5 max-w-none flex-auto">
+                <Markdown content={bottle.description} />
+              </div>
+              <img src={RobotImage} className="hidden h-40 w-40 sm:block" />
             </div>
-            <img src={RobotImage} className="hidden h-40 w-40 sm:block" />
-          </div>
+          )}
           {bottle.tastingNotes && (
             <>
               <h3 className="text-highlight text-lg font-bold">

diff --git a/apps/web/app/routes/entities.$entityId._index.tsx b/apps/web/app/routes/entities.$entityId._index.tsx
@@ -57,33 +57,33 @@ export default function EntityDetailsOverview() {
         <EntityMap position={entity.location} />
       </div>
 
-      {entity.description && (
-        <div className="my-6 px-3 md:px-0">
+      <div className="my-6 px-3 md:px-0">
+        {entity.description && (
           <div className="flex space-x-4">
             <div className="prose prose-invert -mt-5 max-w-none flex-auto">
               <Markdown content={entity.description} />
             </div>
 
             <img src={RobotImage} className="hidden h-40 w-40 sm:block" />
           </div>
-          <div className="prose prose-invert max-w-none flex-auto">
-            <dl>
-              <dt>Website</dt>
-              <dd>
-                {entity.website ? (
-                  <a href={entity.website} className="hover:underline">
-                    {parseDomain(entity.website)}
-                  </a>
-                ) : (
-                  <em>n/a</em>
-                )}
-              </dd>
-              <dt>Year Established</dt>
-              <dd>{entity.yearEstablished ?? <em>n/a</em>}</dd>
-            </dl>
-          </div>
+        )}
+        <div className="prose prose-invert max-w-none flex-auto">
+          <dl>
+            <dt>Website</dt>
+            <dd>
+              {entity.website ? (
+                <a href={entity.website} className="hover:underline">
+                  {parseDomain(entity.website)}
+                </a>
+              ) : (
+                <em>n/a</em>
+              )}
+            </dd>
+            <dt>Year Established</dt>
+            <dd>{entity.yearEstablished ?? <em>n/a</em>}</dd>
+          </dl>
         </div>
-      )}
+      </div>
     </>
   );
 }