UNPKG

@venuecms/sdk-next

Version:

This is a work in progress and is heavily in flux until we launch 1.0 in February.

1 lines 2.87 kB
{"version":3,"sources":["../src/components/VenueImage/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { MediaItem } from \"@venuecms/sdk\";\nimport Image from \"next/image\";\n\nimport ResponsiveImage from \"./ResponsiveImage\";\nimport { cn } from \"@/lib/utils\";\nimport { getPublicImage } from \"../utils/image\";\n\nconst ASPECTS = {\n square: \"aspect-square\",\n video: \"aspect-video\",\n};\n\nexport const VenueImage = ({\n className,\n image,\n aspect,\n props,\n}: {\n className?: string;\n image?: Partial<MediaItem>;\n aspect?: keyof typeof ASPECTS;\n props?: object;\n}) => {\n if (image) {\n const imageUrl = getPublicImage(image);\n\n if (imageUrl) {\n const { metadata } = image;\n const { width, height, altText } = metadata ?? {};\n\n return aspect ? (\n <ImageWrapper aspect={aspect}>\n <ResponsiveImage src={imageUrl} className={className} />\n </ImageWrapper>\n ) : (\n <Image\n src={imageUrl}\n alt={(altText as string) ?? \"image\"}\n width={(width as number) ?? 2048}\n height={(height as number) ?? 2048}\n className={className}\n {...props}\n />\n );\n }\n }\n\n if (aspect) {\n return (\n <ImageWrapper aspect={aspect}>\n <ResponsiveImage src=\"\" className={className} />\n </ImageWrapper>\n );\n }\n\n return null; // TODO: return a placeholder\n};\n\n// wrapper to contain the ResponsiveImage\nconst ImageWrapper = ({\n children,\n aspect,\n}: {\n children?: ReactNode;\n aspect: keyof typeof ASPECTS;\n}) => (\n <div className=\"flex h-full w-full flex-col gap-1\">\n <div\n className={cn(\n \"relative h-full w-full bg-cover bg-center\",\n ASPECTS[aspect],\n )}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":";2HAEA,OAAOA,MAAW,aA+BR,cAAAC,MAAA,oBAzBV,IAAMC,EAAU,CACd,OAAQ,gBACR,MAAO,cACT,EAEaC,EAAa,CAAC,CACzB,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,MAAAC,CACF,IAKM,CACJ,GAAIF,EAAO,CACT,IAAMG,EAAWC,EAAeJ,CAAK,EAErC,GAAIG,EAAU,CACZ,GAAM,CAAE,SAAAE,CAAS,EAAIL,EACf,CAAE,MAAAM,EAAO,OAAAC,EAAQ,QAAAC,CAAQ,EAAIH,GAAY,CAAC,EAEhD,OAAOJ,EACLL,EAACa,EAAA,CAAa,OAAQR,EACpB,SAAAL,EAACc,EAAA,CAAgB,IAAKP,EAAU,UAAWJ,EAAW,EACxD,EAEAH,EAACe,EAAA,CACC,IAAKR,EACL,IAAMK,GAAsB,QAC5B,MAAQF,GAAoB,KAC5B,OAASC,GAAqB,KAC9B,UAAWR,EACV,GAAGG,EACN,CAEJ,CACF,CAEA,OAAID,EAEAL,EAACa,EAAA,CAAa,OAAQR,EACpB,SAAAL,EAACc,EAAA,CAAgB,IAAI,GAAG,UAAWX,EAAW,EAChD,EAIG,IACT,EAGMU,EAAe,CAAC,CACpB,SAAAG,EACA,OAAAX,CACF,IAIEL,EAAC,OAAI,UAAU,oCACb,SAAAA,EAAC,OACC,UAAWiB,EACT,4CACAhB,EAAQI,CAAM,CAChB,EAEC,SAAAW,EACH,EACF","names":["Image","jsx","ASPECTS","VenueImage","className","image","aspect","props","imageUrl","getPublicImage","metadata","width","height","altText","ImageWrapper","ResponsiveImage_default","Image","children","cn"]}