38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import cn from 'classnames';
|
|
import { FC } from 'react';
|
|
import Linkify from 'react-linkify';
|
|
import { Logo } from '../../ui/Logo/Logo';
|
|
import { SocialLinks } from '../../ui/SocialLinks/SocialLinks';
|
|
import { SocialLink } from '../../../interfaces/social-link.model';
|
|
import styles from './ContentHeader.module.scss';
|
|
|
|
export type ContentHeaderProps = {
|
|
name: string;
|
|
summary: string;
|
|
tags: string[];
|
|
links: SocialLink[];
|
|
logo: string;
|
|
};
|
|
|
|
export const ContentHeader: FC<ContentHeaderProps> = ({ name, summary, logo, tags, links }) => (
|
|
<div className={styles.root}>
|
|
<div className={styles.logoTitleSection}>
|
|
<div className={styles.logo}>
|
|
<Logo src={logo} />
|
|
</div>
|
|
<div className={styles.titleSection}>
|
|
<h2 className={cn(styles.title, styles.row, 'header-title')}>{name}</h2>
|
|
<h3 className={cn(styles.subtitle, styles.row, 'header-subtitle')}>
|
|
<Linkify>{summary}</Linkify>
|
|
</h3>
|
|
<div className={cn(styles.tagList, styles.row)}>
|
|
{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag} </span>)}
|
|
</div>
|
|
<div className={cn(styles.socialLinks, styles.row)}>
|
|
<SocialLinks links={links} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|