import { getCollection } from 'lib/shopify'; const Header = async ({ collection }: { collection: string }) => { const collectionData = await getCollection({ handle: collection }); return collectionData ? ( <div className="mb-3 mt-3 max-w-5xl lg:mb-1"> <h1 className="text-4xl font-bold tracking-tight text-gray-900">{collectionData.title}</h1> <p className="mt-2 text-base text-gray-500">{collectionData.description}</p> </div> ) : null; }; export const HeaderPlaceholder = () => { return ( <div className="mb-3 mt-3 max-w-5xl lg:mb-1"> <div className="h-10 w-1/2 rounded bg-gray-200" /> </div> ); }; export default Header;