Uniform header on bottle/entity details

dcramer · Dec 19, 2023 · cecd89f · cecd89f
1 parent c4799d5
commit cecd89f
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 61 deletions.
diff --git a/apps/web/app/components/pageHeader.tsx b/apps/web/app/components/pageHeader.tsx
@@ -0,0 +1,39 @@
+import type { ElementType, ReactNode } from "react";
+
+export default function PageHeader({
+  metadata,
+  icon: Icon,
+  title,
+  titleExtra,
+}: {
+  metadata?: ReactNode;
+  icon?: ElementType;
+  title: string;
+  titleExtra?: ReactNode;
+}) {
+  return (
+    <div className="my-4 flex w-full flex-wrap justify-center gap-x-3 gap-y-4 lg:flex-nowrap lg:justify-start">
+      {!!Icon && (
+        <div className="hidden w-14 lg:block">
+          <Icon className="h-14 w-auto" />
+        </div>
+      )}
+
+      <div className="flex flex-auto flex-col items-center justify-center truncate lg:w-auto lg:items-start">
+        <h1
+          className="max-w-full truncate text-center text-3xl font-semibold lg:mx-0 lg:text-left"
+          title={title}
+        >
+          {title}
+        </h1>
+        {titleExtra}
+      </div>
+
+      {!!metadata && (
+        <div className="flex w-full min-w-[150px] flex-col items-center justify-center gap-x-1 text-slate-500 lg:w-auto lg:items-end">
+          {metadata}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/app/routes/bottles.$bottleId.tsx b/apps/web/app/routes/bottles.$bottleId.tsx
@@ -19,14 +19,15 @@ import Tabs from "@peated/web/components/tabs";
 import TimeSince from "@peated/web/components/timeSince";
 import useAuth from "@peated/web/hooks/useAuth";
 import { summarize } from "@peated/web/lib/markdown";
-import { formatCategoryName } from "@peated/web/lib/strings";
 import { trpc } from "@peated/web/lib/trpc";
 import { type MetaFunction } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useNavigate } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 import invariant from "tiny-invariant";
+import PageHeader from "../components/pageHeader";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
+import { formatCategoryName } from "../lib/strings";
 
 export const { loader, clientLoader } = makeIsomorphicLoader(
   async ({ params, context: { trpc } }) => {
@@ -96,43 +97,36 @@ export default function BottleDetails() {
   return (
     <Layout>
       <div className="w-full p-3 lg:py-0">
-        <div className="my-4 flex w-full flex-wrap justify-center gap-x-3 gap-y-4 lg:flex-nowrap lg:justify-start">
-          <div className="hidden w-14 lg:block">
-            <BottleIcon className="w-14" />
-          </div>
-
-          <div className="flex flex-auto flex-col items-center justify-center truncate lg:w-auto lg:items-start">
-            <h1
-              className="max-w-full truncate text-center text-3xl font-semibold lg:mx-0 lg:text-left"
-              title={bottle.fullName}
-            >
-              {bottle.fullName}
-            </h1>
+        <PageHeader
+          icon={BottleIcon}
+          title={bottle.fullName}
+          titleExtra={
             <BottleMetadata
               data={bottle}
               className="w-full truncate text-center text-slate-500 lg:text-left"
             />
-          </div>
-
-          {(bottle.category || bottle.statedAge) && (
-            <div className="flex w-full min-w-[150px] flex-col items-center justify-center gap-x-1 text-slate-500 lg:w-auto lg:items-end">
-              <div>
-                {bottle.category && (
-                  <Link
-                    to={`/bottles?category=${encodeURIComponent(
-                      bottle.category,
-                    )}`}
-                  >
-                    {formatCategoryName(bottle.category)}
-                  </Link>
-                )}
-              </div>
-              <div>
-                {bottle.statedAge ? `Aged ${bottle.statedAge} years` : null}
+          }
+          metadata={
+            (bottle.category || bottle.statedAge) && (
+              <div className="flex w-full min-w-[150px] flex-col items-center justify-center gap-x-1 text-slate-500 lg:w-auto lg:items-end">
+                <div>
+                  {bottle.category && (
+                    <Link
+                      to={`/bottles?category=${encodeURIComponent(
+                        bottle.category,
+                      )}`}
+                    >
+                      {formatCategoryName(bottle.category)}
+                    </Link>
+                  )}
+                </div>
+                <div>
+                  {bottle.statedAge ? `Aged ${bottle.statedAge} years` : null}
+                </div>
               </div>
-            </div>
-          )}
-        </div>
+            )
+          }
+        />
 
         <div className="my-8 flex justify-center gap-4 lg:justify-start">
           {user && (

diff --git a/apps/web/app/routes/entities.$entityId.tsx b/apps/web/app/routes/entities.$entityId.tsx
@@ -13,6 +13,7 @@ import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useParams } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
+import PageHeader from "../components/pageHeader";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 export const { loader, clientLoader } = makeIsomorphicLoader(
@@ -72,18 +73,10 @@ export default function EntityDetails() {
   return (
     <Layout>
       <div className="w-full p-3 lg:py-0">
-        <div className="my-4 flex w-full flex-wrap justify-center gap-x-3 gap-y-4 lg:flex-nowrap lg:justify-start">
-          <div className="hidden w-14 lg:block">
-            <EntityIcon className="h-14 w-auto" />
-          </div>
-
-          <div className="flex flex-auto flex-col items-center justify-center truncate lg:w-auto lg:items-start">
-            <h1
-              className="max-w-full truncate text-center text-3xl font-semibold lg:mx-0 lg:text-left"
-              title={entity.name}
-            >
-              {entity.name}
-            </h1>
+        <PageHeader
+          icon={EntityIcon}
+          title={entity.name}
+          titleExtra={
             <div className="max-w-full text-center text-slate-500 lg:text-left">
               {!!entity.country && (
                 <>
@@ -111,22 +104,23 @@ export default function EntityDetails() {
                 </span>
               )}
             </div>
-          </div>
-          <div className="lg:justify-left mb-4 flex w-full justify-center space-x-2 lg:min-w-[200px]">
-            {entity.type.sort().map((t) => (
-              <Chip
-                key={t}
-                size="small"
-                color="highlight"
-                as={Link}
-                to={`/entities?type=${encodeURIComponent(t)}`}
-              >
-                {t}
-              </Chip>
-            ))}
-          </div>
-        </div>
-
+          }
+          metadata={
+            <div className="flex gap-x-1">
+              {entity.type.sort().map((t) => (
+                <Chip
+                  key={t}
+                  size="small"
+                  color="highlight"
+                  as={Link}
+                  to={`/entities?type=${encodeURIComponent(t)}`}
+                >
+                  {t}
+                </Chip>
+              ))}
+            </div>
+          }
+        />
         <div className="flex flex-col gap-4 lg:flex-row">
           <div className="flex-auto">
             <div className="my-8 flex justify-center gap-4 lg:justify-start">