54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { TabsClient, type TabDef } from "@/components/TabsClient";
|
|
import { PortableText } from "@portabletext/react";
|
|
import { portableTextComponents } from "@/lib/portableTextComponents";
|
|
import { ArtistWorksTab, type ComposedWork } from "@/components/artist/ArtistWorksTab";
|
|
|
|
type Props = {
|
|
bio: any;
|
|
hasReleases?: boolean;
|
|
releasesTab?: React.ReactNode;
|
|
composedWorks?: ComposedWork[];
|
|
arrangedWorks?: ComposedWork[];
|
|
concerts?: React.ReactNode;
|
|
};
|
|
|
|
export function ArtistTabs({ bio, hasReleases, releasesTab, composedWorks, arrangedWorks, concerts }: Props) {
|
|
const tabs: TabDef[] = [
|
|
{
|
|
id: "bio",
|
|
label: "Biography",
|
|
content: (
|
|
<article className="prose max-w-none text-lighttext dark:prose-invert dark:text-darktext prose-h2:!mt-[3em] prose-h2:font-silkasb prose-h2:text-base">
|
|
<h2 className="sr-only">Biography</h2>
|
|
{bio ? <PortableText value={bio} components={portableTextComponents} /> : <p>No biography available yet.</p>}
|
|
</article>
|
|
),
|
|
},
|
|
];
|
|
|
|
if (composedWorks?.length || arrangedWorks?.length) {
|
|
tabs.push({
|
|
id: "works",
|
|
label: "Works",
|
|
content: <ArtistWorksTab composedWorks={composedWorks} arrangedWorks={arrangedWorks} />,
|
|
});
|
|
}
|
|
|
|
if (concerts) {
|
|
tabs.push({
|
|
id: "concerts",
|
|
label: "Concerts",
|
|
content: concerts,
|
|
});
|
|
}
|
|
|
|
if (hasReleases) {
|
|
tabs.push({
|
|
id: "releases",
|
|
label: "Releases",
|
|
content: releasesTab,
|
|
});
|
|
}
|
|
|
|
return <TabsClient defaultTabId="bio" tabs={tabs} />;
|
|
}
|