I included dynamic path/routes as a bonus.

  Internal path is app/[stateName]/page.tsx
  Public route is domainName.com/(any state name)

// Prisma is ORM that handles DB req/res

  async function getStateInfo(stateName: string) {
  const state: State | null = await prisma.state.findUnique({
    where: { name: stateName },
  });
  return state;

}

type StatePageParams = { params: { stateName: string }};

export default async function StatePage({ params }: StatePageParams) {

  const stateInfo = await getStateInfo(params.stateName);

  return (
      <main className="container flex flex-col items-center justify-center p-2">
        {stateInfo ? (
          <div>
              <h1 className="text-lg"> {stateInfo.name} </h1>
          </div>
          <InteractiveClientCard />
        ) : null}
      </main>
  );
}