support compatible table

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/page/rich-text-display.tsx

@@ -37,7 +37,7 @@ const RichTextBlock = ({ block, className }: { block: Content; className?: strin
     const Heading = `h${block.level}` as keyof JSX.IntrinsicElements;
     return (
       <Heading
-        className={clsx('text-black-700', {
+        className={clsx('text-content-strong', {
           'text-3xl': block.level === 2,
           'text-2xl': block.level === 3,
           'text-lg': block.level === 4,

components/page/table.tsx

@@ -0,0 +1,37 @@
+type TableProps = {
+  columns: { key: string; title: string }[];
+  data: Array<Record<string, string>>;
+  title: string;
+};
+
+const Table = ({ columns, data, title }: TableProps) => {
+  return (
+    <div className="flex w-full flex-col gap-y-5">
+      <h3 className="text-2xl font-semibold text-content-strong">{title}</h3>
+      <table className="w-full">
+        <thead>
+          <tr>
+            {columns.map((column, index) => (
+              <th key={column.key} className={`text-left ${index === 0 ? 'pl-2' : ''}`}>
+                {column.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr key={index} className={`${index % 2 === 0 ? 'bg-gray-100' : ''}`}>
+              {columns.map((column, index) => (
+                <td key={column.key} className={`${index === 0 ? 'pl-2' : ''}`}>
+                  {row[column.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;

components/plp/tabs.tsx

@@ -1,8 +1,27 @@
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import RichTextDisplay from 'components/page/rich-text-display';
+import Table from 'components/page/table';
+import { getMetaobject } from 'lib/shopify';
 import startCase from 'lodash.startcase';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components';
 
+const TabContent = async ({ id }: { id?: string }) => {
+  if (!id) {
+    return null;
+  }
+
+  const metaobject = await getMetaobject({ id });
+  if (!metaobject || metaobject.type !== 'plp_content_tables') return null;
+
+  return (
+    <Table
+      columns={JSON.parse(metaobject.columns || '[]')}
+      data={JSON.parse(metaobject.data || '[]')}
+      title={metaobject.name || 'Table'}
+    />
+  );
+};
+
 const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
   const keys = Object.keys(fields);
 
@@ -10,6 +29,8 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
     return null;
   }
 
+  const isShopifyId = (value?: string) => value?.startsWith('gid://shopify');
+
   return (
     <TabGroup vertical>
       <div className="flex w-full gap-x-10">
@@ -27,7 +48,11 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
         <TabPanels className="flex basis-3/4">
           {keys.map((key) => (
             <TabPanel className="flex min-w-full flex-col space-y-5" key={key}>
-              <RichTextDisplay contentBlocks={JSON.parse(fields[key] || '{}').children || []} />
+              {isShopifyId(fields[key]) ? (
+                <TabContent id={fields[key]} />
+              ) : (
+                <RichTextDisplay contentBlocks={JSON.parse(fields[key] || '{}').children || []} />
+              )}
             </TabPanel>
           ))}
         </TabPanels>