trptk/components/artist/ArtistWorksTab.tsx

import { ArrowLink } from "@/components/ArrowLink";

export type ComposedWork = {
  title?: string;
  slug?: string;
  originalComposerName?: string;
  arrangerName?: string;
};

type Props = {
  composedWorks?: ComposedWork[];
  arrangedWorks?: ComposedWork[];
};

export function ArtistWorksTab({ composedWorks, arrangedWorks }: Props) {
  if (!composedWorks?.length && !arrangedWorks?.length) return null;

  return (
    <div>
      {composedWorks?.length ? (
        <div className="flex flex-col md:flex-row">
          <h3 className="mb-2 flex-none font-silkasb text-base md:mb-0 md:w-40">Compositions</h3>
          <ul className="md:flex-1">
            {composedWorks.map((w, idx) => {
              const key = w.slug ?? `composed-${idx}`;

              return (
                <li key={key}>
                  {w.slug ? (
                    <ArrowLink href={`/work/${w.slug}`}>
                      {w.title}
                      {w.arrangerName && (
                        <span className="ml-2 text-lightsec opacity-50 dark:text-darksec">
                          {" "}
                          (arr. {w.arrangerName})
                        </span>
                      )}
                    </ArrowLink>
                  ) : (
                    <>
                      {w.title}
                      {w.arrangerName && (
                        <span className="ml-2 text-lightsec opacity-50 dark:text-darksec">
                          {" "}
                          (arr. {w.arrangerName})
                        </span>
                      )}
                    </>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      ) : null}

      {composedWorks?.length && arrangedWorks?.length ? <div className="mb-8" /> : null}

      {arrangedWorks?.length ? (
        <div className="flex flex-col md:flex-row">
          <h3 className="mb-2 font-silkasb text-base md:mb-0 md:w-40 md:flex-none">Arrangements</h3>
          <ul className="md:flex-1">
            {arrangedWorks.map((w, idx) => {
              const key = w.slug ?? `arranged-${idx}`;

              return (
                <li key={key}>
                  {w.slug ? (
                    <ArrowLink href={`/work/${w.slug}`}>
                      {w.originalComposerName && (
                        <span className="mr-2 text-lightsec opacity-50 dark:text-darksec">
                          {w.originalComposerName}:{" "}
                        </span>
                      )}
                      {w.title}
                    </ArrowLink>
                  ) : (
                    <>
                      {w.originalComposerName && (
                        <span className="mr-2 text-lightsec opacity-50 dark:text-darksec">
                          {w.originalComposerName}:{" "}
                        </span>
                      )}
                      {w.title}
                    </>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      ) : null}
    </div>
  );
}