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}