@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.13-alpha.0",
+  "version": "55.0.15-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,17 +33,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^5.0.6-alpha.0",
-    "@ndla/button": "^14.0.6-alpha.0",
+    "@ndla/accordion": "^5.0.7-alpha.0",
+    "@ndla/button": "^14.0.7-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^9.0.6-alpha.0",
+    "@ndla/forms": "^9.0.8-alpha.0",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^7.0.7-alpha.0",
+    "@ndla/icons": "^7.0.8-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/modal": "^7.0.6-alpha.0",
-    "@ndla/primitives": "^0.0.17",
-    "@ndla/safelink": "^6.0.0-alpha.0",
+    "@ndla/modal": "^7.0.7-alpha.0",
+    "@ndla/primitives": "^0.0.19",
+    "@ndla/safelink": "^6.0.2-alpha.0",
     "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
@@ -54,9 +54,7 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
     "punycode.js": "^2.3.1",
-    "react-device-detect": "^2.2.3",
-    "react-select": "^5.8.0",
-    "react-swipeable": "^7.0.0"
+    "react-device-detect": "^2.2.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -68,7 +66,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.10",
+    "@ndla/preset-panda": "^0.0.11",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^4.1.8",
     "@pandacss/dev": "^0.42.0",
@@ -81,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
+  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
 }

package/src/Article/ArticleByline.tsx

@@ -15,7 +15,7 @@ import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import ArticleFootNotes from "./ArticleFootNotes";
-import LicenseLink from "../LicenseByline/LicenseLink";
+import { LicenseLink } from "../LicenseByline/LicenseLink";
 import { FootNote } from "../types";
 
 const Wrapper = styled.div`

package/src/Article/ArticleParagraph.tsx

@@ -7,19 +7,21 @@
  */
 
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import styled from "@emotion/styled";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends ComponentPropsWithoutRef<"p"> {
   children?: ReactNode;
 }
 
-const StyledParagraph = styled.p`
-  &[data-align="center"] {
-    text-align: center;
-  }
-  &:has(span[dir="rtl"]) {
-    direction: rtl;
-  }
-`;
+const StyledParagraph = styled("p", {
+  base: {
+    '&[data-align="center"]': {
+      textAlign: "center",
+    },
+    '&:has(span[dir="rtl"])': {
+      direction: "rtl",
+    },
+  },
+});
 
 export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/AudioPlayer/AudioPlayer.tsx

@@ -22,6 +22,7 @@ const AudioPlayerWrapper = styled("div", {
     borderColor: "stroke.default",
     borderRadius: "xsmall",
     boxShadow: "full",
+    marginBlockEnd: "4xsmall",
     overflow: "hidden",
   },
 });

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,14 +6,13 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, spacing, mq, misc } from "@ndla/core";
+import { ReactNode } from "react";
 import { Forward } from "@ndla/icons/common";
+import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { HeadingLevel } from "@ndla/typography";
+import { styled } from "@ndla/styled-system/jsx";
+import { HeadingLevel } from "../types";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 interface Image {
@@ -35,74 +34,112 @@ interface Props {
   path?: string;
 }
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.normal};
-  border: 1px ${colors.brand.lighter} solid;
-  border-radius: ${misc.borderRadius};
-  padding: ${spacing.normal};
-  background-color: ${colors.white};
-  &[data-image-side="right"] {
-    flex-direction: column-reverse;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    max-width: 1100px;
-    flex-direction: row;
-    &[data-image-side="right"] {
-      flex-direction: row-reverse;
-    }
-  }
-`;
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    backgroundColor: "background.default",
+    borderRadius: "xsmall",
+    boxShadow: "full",
+    maxWidth: "surface.xsmall",
+    overflow: "hidden",
+    mobileWide: {
+      maxWidth: "surface.medium",
+    },
+    tabletWide: {
+      // TODO: This is probably not the correct max-width. And it should be a token
+      maxWidth: "1100px",
+      flexDirection: "row",
+    },
+  },
+});
 
-const headingStyle = css`
-  margin: 0;
-`;
+const LinkText = styled(Text, {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+});
+const StyledImg = styled("img", {
+  base: {
+    alignSelf: "center",
+    objectFit: "cover",
+    width: "100%",
+    height: "215px",
+    desktop: {
+      height: "340px",
+    },
+  },
+});
 
-const StyledDescription = styled.p`
-  font-family: ${fonts.serif};
-  margin: ${spacing.normal} 0 ${spacing.medium};
-`;
+const ContentWrapper = styled("div", {
+  base: {
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    alignItems: "flex-start",
+    paddingBlock: "medium",
+    paddingInline: "medium",
+  },
+});
 
-const StyledImg = styled.img`
-  align-self: center;
-  object-fit: contain;
-`;
+interface MaybeLinkTextProps {
+  url?: string;
+  path?: string;
+  children: ReactNode;
+}
 
-const StyledLink = styled(SafeLink)`
-  display: inline-flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  color: ${colors.brand.primary};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+  },
+});
 
-const TextWrapper = styled.div`
-  flex-grow: 1;
-`;
+const MaybeLinkText = ({ url, children, path }: MaybeLinkTextProps) => {
+  if (url) return <StyledSafeLink to={getPossiblyRelativeUrl(url, path)}>{children}</StyledSafeLink>;
+  return children;
+};
 
 const CampaignBlock = ({
   title,
   image,
   imageSide = "left",
   description,
-  headingLevel: Heading = "h2",
+  headingLevel: InternalHeading = "h2",
   url,
   path,
   className,
 }: Props) => {
+  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
+  const HeaderComponent = url?.url ? LinkText : Text;
   return (
-    <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
-      {image && <StyledImg src={`${image.src}?width=240`} height={200} width={240} alt={image.alt} />}
-      <TextWrapper>
-        <Heading css={headingStyle}>{parse(title)}</Heading>
-        <StyledDescription>{parse(description)}</StyledDescription>
+    <Container className={className} data-type="campaign-block">
+      {imageSide === "left" && imageComponent}
+      <ContentWrapper>
+        <MaybeLinkText url={url?.url} path={path}>
+          <HeaderComponent asChild consumeCss textStyle="heading.small">
+            <InternalHeading>{parse(title)}</InternalHeading>
+          </HeaderComponent>
+        </MaybeLinkText>
+        <Text textStyle="body.large">{parse(description)}</Text>
         {!!url?.url && (
-          <StyledLink to={getPossiblyRelativeUrl(url.url, path)}>
-            {parse(url.text ?? "")}
-            <Forward />
-          </StyledLink>
+          <MaybeLinkText url={url.url} path={path}>
+            <LinkText textStyle="body.medium">
+              {parse(url.text ?? "")}
+              <Forward />
+            </LinkText>
+          </MaybeLinkText>
         )}
-      </TextWrapper>
+      </ContentWrapper>
+      {imageSide !== "left" && imageComponent}
     </Container>
   );
 };

package/src/Concept/Concept.stories.tsx

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import { ConceptData } from "@ndla/types-embed";
+import { Concept } from "./Concept";
+
+const visualElementData: ConceptData["visualElement"] = {
+  resource: "image",
+  status: "success",
+  embedData: {
+    resource: "image",
+    resourceId: "61181",
+    size: "full",
+    align: "",
+    alt: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+    caption:
+      "Den østerrikske tronfølgeren Franz Ferdinand og hans hustru Sophie var på besøk i Sarajevo i 1914. Begge ble skutt og drept av nasjonalisten Gavrilo Princip i det som er kjent som <em>skuddene i Sarajevo</em>. Denne hendelsen var den utløsende årsaken til første verdenskrig.",
+    url: "https://api.test.ndla.no/image-api/v2/images/61181",
+  },
+  data: {
+    id: "61181",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
+    title: {
+      title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",
+      language: "nb",
+    },
+    alttext: {
+      alttext: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+      language: "nb",
+    },
+    copyright: {
+      license: {
+        license: "CC-BY-NC-4.0",
+        description: "Creative Commons Attribution-NonCommercial 4.0 International",
+        url: "https://creativecommons.org/licenses/by-nc/4.0/",
+      },
+      origin: "https://bilder.ntb.no/r/preview/creative/EXuziiZGWno",
+      creators: [
+        {
+          type: "photographer",
+          name: "Maskot",
+        },
+      ],
+      processors: [],
+      rightsholders: [
+        {
+          type: "rightsholder",
+          name: "NTB",
+        },
+      ],
+      processed: false,
+    },
+    tags: {
+      tags: ["danser", "kultur", "identitet"],
+      language: "nb",
+    },
+    caption: {
+      caption: "Modellklarert.",
+      language: "nb",
+    },
+    supportedLanguages: ["nb"],
+    created: "2022-01-07T08:26:01Z",
+    createdBy: "lA2KgVfhY-fpmgHCYAy5W1DX",
+    modelRelease: "yes",
+    image: {
+      fileName: "S81WiNgl.jpg",
+      size: 1685455,
+      contentType: "image/jpeg",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg",
+      dimensions: {
+        width: 2000,
+        height: 1333,
+      },
+      language: "nb",
+    },
+  },
+};
+
+export default {
+  title: "Components/Concept",
+  component: Concept,
+  tags: ["autodocs"],
+  args: {
+    title: "skin - formasjonsskade",
+    lang: "nb",
+    visualElement: visualElementData,
+    copyright: {
+      license: {
+        license: "CC-BY-SA-4.0",
+        description: "Creative Commons Attribution-ShareAlike 4.0 International",
+        url: "https://creativecommons.org/licenses/by-sa/4.0/",
+      },
+      creators: [{ type: "Writer", name: "Sissel Paaske" }],
+      processors: [
+        { type: "Processor", name: "Totaltekst" },
+        { type: "Correction", name: "Arbeidets art" },
+      ],
+      rightsholders: [],
+      processed: false,
+    },
+    children: (
+      <>
+        <p>
+          Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til
+          brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin
+          forteller om bergartens permeabilitet i reservoarsonen.
+        </p>
+        <p>Hullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.</p>
+        <p>
+          Skaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges,
+          og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.
+        </p>
+        <p>
+          Det er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å
+          bore med en borekrone som skader minst mulig.
+        </p>
+        <p>Skader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.</p>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Concept>;
+
+export const Default: StoryObj<typeof Concept> = {};
+
+export const WithoutVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+  },
+};
+
+export const WithoutLicenseAndVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+    copyright: undefined,
+  },
+};

package/src/Concept/Concept.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import { ConceptVisualElementMeta } from "@ndla/types-embed";
+import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
+import { EmbedByline, LicenseContainerContent } from "../LicenseByline/EmbedByline";
+
+export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
+  copyright?: ConceptCopyright;
+  visualElement?: ConceptVisualElementMeta;
+  lang?: string;
+  title?: string;
+  children?: ReactNode;
+}
+
+const StyledFigure = styled(Figure, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+  },
+});
+
+const ContentWrapper = styled("div", {
+  base: {
+    textStyle: "body.large",
+    display: "inline",
+    "& p": {
+      display: "inline",
+    },
+  },
+});
+
+// TODO: Figure out if we need to support tags, subjects and headerButtons.
+
+export const Concept = forwardRef<HTMLElement, ConceptProps>(
+  ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {
+    return (
+      <StyledFigure ref={ref} {...rest}>
+        <ContentWrapper lang={lang}>
+          {!!title && (
+            <>
+              <b>{title}</b>
+              {` – `}
+            </>
+          )}
+          {children}
+        </ContentWrapper>
+        {visualElement?.resource === "image" ? (
+          <ImageEmbed embed={visualElement} lang={lang} />
+        ) : visualElement?.resource === "brightcove" ? (
+          <BrightcoveEmbed embed={visualElement} />
+        ) : visualElement?.resource === "h5p" ? (
+          <H5pEmbed embed={visualElement} />
+        ) : visualElement?.resource === "iframe" ? (
+          <IframeEmbed embed={visualElement} />
+        ) : visualElement?.resource === "external" ? (
+          <ExternalEmbed embed={visualElement} />
+        ) : null}
+        {copyright && <EmbedByline copyright={copyright} type="concept" />}
+      </StyledFigure>
+    );
+  },
+);

package/src/ContactBlock/ContactBlock.tsx

@@ -18,7 +18,7 @@ import { Image } from "@ndla/primitives";
 import { IAuthor, IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { CanonicalUrlFuncs } from "../Embed";
 import { errorSvgSrc } from "../Embed/ImageEmbed";
-import LicenseLink from "../LicenseByline/LicenseLink";
+import { LicenseLink } from "../LicenseByline/LicenseLink";
 
 const BLOB_WIDTH = 90;
 

package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useTranslation } from "react-i18next";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Video } from "@ndla/icons/editor";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { ContentTypeBadge } from "./ContentTypeBadgeNew";
+
+export default {
+  title: "Components/ContentTypeBadgeNew",
+  component: ContentTypeBadge,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+  },
+  args: {
+    contentType: "subject-material",
+  },
+} satisfies Meta<typeof ContentTypeBadge>;
+
+export const Default: StoryObj<typeof ContentTypeBadge> = {};
+
+const StyledHStack = styled(HStack, {
+  base: {
+    flexWrap: "wrap",
+  },
+});
+
+export const AllBadges: StoryFn<typeof ContentTypeBadge> = () => (
+  <StyledHStack gap="3xsmall">
+    <ContentTypeBadge contentType="subject-material" />
+    <ContentTypeBadge contentType="tasks-and-activities" />
+    <ContentTypeBadge contentType="assessment-resources" />
+    <ContentTypeBadge contentType="subject" />
+    <ContentTypeBadge contentType="source-material" />
+    <ContentTypeBadge contentType="learning-path" />
+    <ContentTypeBadge contentType="topic" />
+    <ContentTypeBadge contentType="multidisciplinary-topic" />
+    <ContentTypeBadge contentType="concept" />
+    <ContentTypeBadge contentType="external" />
+    <ContentTypeBadge contentType="image" />
+    <ContentTypeBadge contentType="audio" />
+    <ContentTypeBadge contentType="video" />
+    <ContentTypeBadge contentType="missing" />
+  </StyledHStack>
+);
+
+const StyledContentTypeBadge = styled(ContentTypeBadge, {
+  base: {
+    display: "flex",
+    gap: "4xsmall",
+    alignItems: "center",
+  },
+});
+
+export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
+  const { t } = useTranslation();
+  return (
+    <StyledContentTypeBadge contentType="video">
+      <Video size="small" />
+      {t("contentTypes.video")}
+    </StyledContentTypeBadge>
+  );
+};

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge, BadgeProps, type BadgeVariant } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+  contentType: ContentType | undefined;
+}
+
+type ContentType =
+  | typeof contentTypes.SUBJECT_MATERIAL
+  | typeof contentTypes.TASKS_AND_ACTIVITIES
+  | typeof contentTypes.ASSESSMENT_RESOURCES
+  | typeof contentTypes.SUBJECT
+  | typeof contentTypes.SOURCE_MATERIAL
+  | typeof contentTypes.LEARNING_PATH
+  | typeof contentTypes.TOPIC
+  | typeof contentTypes.MULTIDISCIPLINARY_TOPIC
+  | typeof contentTypes.CONCEPT
+  | typeof contentTypes.EXTERNAL
+  | typeof contentTypes.IMAGE
+  | typeof contentTypes.AUDIO
+  | typeof contentTypes.VIDEO
+  | typeof contentTypes.MISSING
+  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
+  | (string & {});
+
+export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
+  [contentTypes.SUBJECT_MATERIAL]: "brand1",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  [contentTypes.SUBJECT]: "neutral",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  [contentTypes.LEARNING_PATH]: "brand3",
+  [contentTypes.TOPIC]: "neutral",
+  // TODO: Verify this color
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  // TODO: Verify this color
+  [contentTypes.EXTERNAL]: "brand2",
+  // TODO: Verify resourceEmbedTypeMapping colors
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral",
+};
+
+export const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(
+  ({ contentType, children, ...props }, ref) => {
+    const { t } = useTranslation();
+    return (
+      <Badge
+        colorTheme={contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"]}
+        {...props}
+        ref={ref}
+      >
+        {children ?? t(`contentTypes.${contentType}`)}
+      </Badge>
+    );
+  },
+);

package/src/Embed/AudioEmbed.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import { Figure } from "@ndla/primitives";
 import { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Author } from "./ImageEmbed";
 import AudioPlayer from "../AudioPlayer";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
@@ -42,7 +42,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
   return (
-    <Figure type="full" lang={lang}>
+    <Figure lang={lang}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}