Build a vehicle make selector with brand logos

The badge set is no longer the long pole

The component is an afternoon. Finding sixty badges, checking each one, trimming the whitespace, and exporting them at matching sizes is the part that used to eat the sprint. That part is one URL now.

Replaces sourcing and normalising a badge set

Fewer wrong-make records downstream

A badge beside the name is a second confirmation. Someone who taps the wrong row on a phone sees the wrong badge and fixes it before it reaches your database, your quote, or your claim.

Replaces cleanup of mis-keyed makes after the fact

A picker that keeps up with the market

New brands appear in the JSON API. An EV brand that launched last quarter is in the picker after the next revalidation, not after a release that someone had to remember to schedule.

Replaces a release every time a brand launches

One component across every flow

Search, onboarding, quoting, and claims all pick a make. Build the selector once against one URL pattern and reuse it; each flow changes only the size parameter.

Replaces four selectors carrying four logo sets

1. 01

   Fetch the make list on the server

   The JSON API lists every published brand with an id (the slug the CDN expects) and a name. Fetch it with the secret key, revalidate daily, and pass the result to the client component as props.

   Trim the list to the makes your inventory carries if the selector should not show brands you never stock.

   export type Make = { slug: string; name: string };
   
   export async function getMakes(): Promise<Make[]> {
     const res = await fetch("https://api.motomarks.io/brands", {
       headers: { Authorization: `Bearer ${process.env.MOTOMARKS_SECRET_KEY}` },
       next: { revalidate: 86400 },
     });
     if (!res.ok) throw new Error(`Motomarks responded ${res.status}`);
   
     const brands: { id: string; name: string }[] = await res.json();
     return brands
       .map(({ id, name }) => ({ slug: id, name }))
       .sort((a, b) => a.name.localeCompare(b.name));
   }

2. 02

   Build the badge URL once

   One function owns the CDN URL. The selector asks for sm; a summary card later in the flow asks for md. Nothing else about the request changes.

   export function badgeUrl(slug: string, size: "xs" | "sm" | "md" = "sm") {
     const params = new URLSearchParams({
       type: "badge",
       size,
       token: process.env.NEXT_PUBLIC_MOTOMARKS_KEY!,
     });
     return `https://motomarks.io/img/${slug}?${params}`;
   }

3. 03

   Render the selector

   A search input filters the list; each make is a button with role="option" and aria-selected. Selection is controlled from the parent, so the chosen slug is ready for the next step of your flow.

   This is the component running in the demo above, minus the analytics call.

   "use client";
   
   import { useMemo, useState } from "react";
   import { badgeUrl } from "@/lib/badge-url";
   import type { Make } from "@/lib/makes";
   
   export function MakeSelector({
     makes,
     value,
     onChange,
   }: {
     makes: Make[];
     value: string | null;
     onChange: (slug: string) => void;
   }) {
     const [query, setQuery] = useState("");
     const visible = useMemo(() => {
       const q = query.trim().toLowerCase();
       return q ? makes.filter((m) => m.name.toLowerCase().includes(q)) : makes;
     }, [makes, query]);
   
     return (
       <div>
         <input
           type="search"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Search makes"
           aria-label="Search makes"
         />
         <ul role="listbox" aria-label="Vehicle make" className="make-grid">
           {visible.map((make) => (
             <li key={make.slug} role="presentation">
               <button
                 type="button"
                 role="option"
                 aria-selected={make.slug === value}
                 onClick={() => onChange(make.slug)}
               >
                 <img src={badgeUrl(make.slug)} alt="" width={40} height={40} loading="lazy" />
                 <span>{make.name}</span>
               </button>
             </li>
           ))}
         </ul>
       </div>
     );
   }

4. 04

   Handle a missing badge

   Variant availability differs by brand. Swap in the initial on onError so the grid never shows a broken image, and keep the name label so nothing depends on the image loading.

   function MakeBadge({ slug, name }: Make) {
     const [failed, setFailed] = useState(false);
     if (failed) return <span className="make-initial">{name[0]}</span>;
     return (
       <img
         src={badgeUrl(slug)}
         alt=""
         width={40}
         height={40}
         loading="lazy"
         onError={() => setFailed(true)}
       />
     );
   }

Questions before you integrate