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> ); }; |
