Pass Slice data to client in Nextjs 14

Developing with Prismic
, ,
12

Can I assume that

const tabData // is an array of your custom type called "tab?"

Let's assume that's a "yes."

You then pass an array of tab types to the TabList component.

I would think your TabList component might be structured like this (note the change in types imported):

"use client";

import { Content } from "@prismicio/client";
import {PrismicRichText} from '@prismicio/client';
import {
  TabDocument
} from "../../../prismicio-types";
import { Tabs, Tab, Card, CardBody } from "@nextui-org/react";

type TabsListProps = {
  tabs: Array<TabDocument>;
};
const TabList = (tabData: TabListProps) => {
  return (
    <div className="flex w-full flex-col flex-center justify-center">
      <Tabs>
        {
          tabData.length && tabData.map((item, index) => {
            <Tab key={index} title={item.tab_name}>
              {/* Render the richtext as follows*/}
             {'heading' in item ? (<PrismicRichText field={item.heading} />) : null }
            </Tab>
          }
        }
      </Tabs>
    </div>
  )
}
export default TabList