display concise form of Ambassador card on blog post

Author: jemgillam

src/components/ambassador-grid.tsx

@@ -18,6 +18,7 @@ function buildRows(ambassador: Ambassador): InfoCardRow[] {
     },
     {
       type: "label",
+      hideInConciseMode: true,
       label:
         ambassador.tags.length > 0 ? (
           <div className="flex flex-wrap items-center gap-3">
@@ -39,14 +40,21 @@ function buildRows(ambassador: Ambassador): InfoCardRow[] {
   ]
 }
 
-export function AmbassadorGrid({ ambassadors }: { ambassadors: Ambassador[] }) {
+export function AmbassadorGrid({
+  ambassadors,
+  concise,
+}: {
+  ambassadors: Ambassador[]
+  concise?: boolean
+}) {
   return (
     <div className="mx-auto mt-10 flex w-full max-w-6xl flex-wrap justify-center gap-8">
       {ambassadors.map((ambassador, index) => (
         <InfoCard
           key={`${ambassador.label}-${index}`}
           rows={buildRows(ambassador)}
           className="h-full"
+          concise={concise}
         />
       ))}
     </div>

src/components/info-card/index.tsx

@@ -4,24 +4,28 @@ import { ReactNode } from "react"
 export interface InfoCardLabelRow {
   type: "label"
   label: ReactNode
+  hideInConciseMode?: boolean
 }
 
 export interface InfoCardTitleRow {
   type: "title"
   title: ReactNode
+  hideInConciseMode?: boolean
 }
 
 export interface InfoCardImageRow {
   type: "image"
   imageUrl: string
   alt?: string
+  hideInConciseMode?: boolean
 }
 
 export type InfoCardRow = InfoCardLabelRow | InfoCardTitleRow | InfoCardImageRow
 
 export interface InfoCardProps {
   rows: InfoCardRow[]
   className?: string
+  concise?: boolean
 }
 
 export function InfoCardRow({ row }: { row: InfoCardRow }) {
@@ -54,7 +58,7 @@ export function InfoCardRow({ row }: { row: InfoCardRow }) {
   }
 }
 
-export function InfoCard({ rows, className }: InfoCardProps) {
+export function InfoCard({ rows, concise, className }: InfoCardProps) {
   return (
     <div
       className={clsx(
@@ -63,9 +67,11 @@ export function InfoCard({ rows, className }: InfoCardProps) {
       )}
     >
       <div className="flex flex-1 flex-col">
-        {rows.map((row, i) => (
-          <InfoCardRow key={i} row={row} />
-        ))}
+        {rows.map((row, i) =>
+          !concise || !row.hideInConciseMode ? (
+            <InfoCardRow key={i} row={row} />
+          ) : null,
+        )}
       </div>
     </div>
   )