import Tag from 'components/tag'; import { getMetaobject } from 'lib/shopify'; import { Collection } from 'lib/shopify/types'; import { Suspense } from 'react'; import Tabs, { TabsPlaceholder } from './tabs'; const DefaultContent = async ({ collection }: { collection: Collection }) => { let handle = 'default-plp-content'; if (collection.handle.startsWith('transmissions')) { handle = 'transmissions-plp-content'; } if ( collection.handle.startsWith('engines') || collection.handle.startsWith('remanufactured-engines') ) { handle = 'engines-plp-content'; } if (collection.handle.startsWith('transfer-cases')) { handle = 'transfer-cases-plp-content'; } const defaultPLPContent = await getMetaobject({ handle: { handle, type: 'plp_content' } }); if (!defaultPLPContent) { return null; } const { id, type, title, ...fields } = defaultPLPContent; return ( <div> <Tag text="Learn More" /> <h3 className="mb-5 mt-3 text-3xl font-semibold text-content-strong lg:text-4xl">{title}</h3> <Suspense fallback={<TabsPlaceholder />}> <Tabs fields={fields} /> </Suspense> </div> ); }; export default DefaultContent;