diff --git a/apps/web/src/components/join.tsx b/apps/web/src/components/join.tsx new file mode 100644 index 00000000..5f402032 --- /dev/null +++ b/apps/web/src/components/join.tsx @@ -0,0 +1,23 @@ +import type { ReactNode } from "react"; +import { Fragment } from "react"; + +export default function Join({ + children, + divider, +}: { + children: ReactNode[]; + divider: ReactNode; +}) { + return ( + <> + {children.map((child, index) => { + return ( + + {!!index && divider} + {child} + + ); + })} + + ); +} diff --git a/apps/web/src/components/search/bottleResult.tsx b/apps/web/src/components/search/bottleResult.tsx index 8a940fd5..7a776291 100644 --- a/apps/web/src/components/search/bottleResult.tsx +++ b/apps/web/src/components/search/bottleResult.tsx @@ -3,6 +3,8 @@ import { formatCategoryName } from "@peated/server/lib/format"; import type { Bottle } from "@peated/server/types"; import BottleIcon from "@peated/web/assets/bottle.svg"; import Link from "@peated/web/components/link"; +import { Fragment, type ReactNode } from "react"; +import Join from "../join"; export type BottleResult = { type: "bottle"; ref: Bottle; @@ -15,6 +17,22 @@ export default function BottleResultRow({ result: BottleResult; directToTasting: boolean; }) { + const metadata: ReactNode[] = []; + if (bottle.distillers.length) + metadata.push( + + + {bottle.distillers.map((d) => ( + {d.name} + ))} + + , + ); + if (bottle.vintageYear) + metadata.push({bottle.vintageYear} Vintage); + if (bottle.releaseYear) + metadata.push({bottle.releaseYear} Release); + return ( <> @@ -39,9 +57,9 @@ export default function BottleResultRow({ )}
- {bottle.distillers.length - ? bottle.distillers.map((d) => {d.name}) - : null} + {metadata.length ? ( + ·}>{metadata} + ) : null}