diff options
Diffstat (limited to 'src/components/organisms/layout/overview.tsx')
| -rw-r--r-- | src/components/organisms/layout/overview.tsx | 41 | 
1 files changed, 35 insertions, 6 deletions
| diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index 42d0431..55ad0b5 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -1,13 +1,33 @@  import ResponsiveImage, {    type ResponsiveImageProps,  } from '@components/molecules/images/responsive-image'; -import Meta, { type MetaMap } from '@components/molecules/layout/meta'; +import Meta, { type MetaData } from '@components/molecules/layout/meta';  import { FC } from 'react';  import styles from './overview.module.scss'; +export type OverviewMeta = Pick< +  MetaData, +  | 'creation' +  | 'license' +  | 'popularity' +  | 'repositories' +  | 'technologies' +  | 'update' +>; +  export type OverviewProps = { +  /** +   * Set additional classnames to the overview wrapper. +   */ +  className?: string; +  /** +   * The overview cover. +   */    cover?: Pick<ResponsiveImageProps, 'alt' | 'src' | 'width' | 'height'>; -  meta: MetaMap; +  /** +   * The overview meta. +   */ +  meta: OverviewMeta;  };  /** @@ -15,17 +35,26 @@ export type OverviewProps = {   *   * Render an overview.   */ -const Overview: FC<OverviewProps> = ({ cover, meta }) => { +const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => { +  const { technologies, ...remainingMeta } = meta; +  const metaModifier = technologies ? styles['meta--has-techno'] : ''; +    return ( -    <div className={styles.wrapper}> +    <div className={`${styles.wrapper} ${className}`}>        {cover && (          <ResponsiveImage -          objectFit="cover" +          layout="responsive" +          objectFit="contain"            className={styles.cover}            {...cover}          />        )} -      <Meta data={meta} layout="column" responsiveLayout={true} /> +      <Meta +        data={{ ...remainingMeta, technologies }} +        layout="inline" +        className={`${styles.meta} ${metaModifier}`} +        withSeparator={false} +      />      </div>    );  }; | 
