Function TabbedTable

docs/src/components/ThemeColorsTable.tsx:65–106

({
  themeColorsData,
  uniqueKeys,
}: {
  themeColorsData: DataObject;
  uniqueKeys: string[];
})

};

const TabbedTable = ({
  themeColorsData,
  uniqueKeys,
}: {
  themeColorsData: DataObject;
  uniqueKeys: string[];
}): ReactNode => {
  const tabTableContent = Object.keys(themeColorsData).map((key) => {
    const modes = themeColorsData[key] as DataObject;
    const rows = Object.keys(modes).map((mode) => {
      return (
        <tr key={`${key}-${mode}`}>
          <td>{mode}</td>
          {getTableCell(uniqueKeys, modes[mode] as DataObject)}
        </tr>
      );
    });
    return (
      <TabItem label={key} value={key} key={key}>
        <table>
          <thead>
            <tr>
              <th>mode</th>
              {getTableHeader(uniqueKeys)}
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      </TabItem>
    );
  });

  return (
    <>
      <Admonition type="info">
        The table below outlines the theme colors, specifically for MD3{' '}
        <i>(theme version 3)</i> at the moment.
      </Admonition>
      <Tabs>{tabTableContent}</Tabs>
    </>
  );
};

const ThemeColorsTable = ({
  themeColorsData,