subman-nextjs/src/app/ui/genreBadges.tsx

import { Genre } from "@prisma/client";
import { ComponentProps } from "react";
import { Badge } from "@/components/ui/badge";

export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
  return (
    <div className={"flex flex-wrap gap-1 justify-center " + props.className}>
      {props.genres.map((e: Genre) => (<Badge className="text-xs md:text-sm" key={e.name}>{e.name}</Badge>))}
    </div>
  )
}