2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2019-12-14 15:46:43 +01:00
|
|
|
import Icon from '../../atoms/Icon'
|
2021-03-01 00:03:39 +01:00
|
|
|
import PostDate from '../../molecules/PostDate'
|
2023-01-29 22:58:19 +01:00
|
|
|
import * as styles from './Title.module.css'
|
2018-07-19 16:49:20 +02:00
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
export default function PostTitle({
|
|
|
|
linkurl,
|
2020-06-01 16:07:56 +02:00
|
|
|
title,
|
|
|
|
date,
|
2020-07-19 13:31:27 +02:00
|
|
|
updated,
|
|
|
|
className
|
2019-10-02 13:35:50 +02:00
|
|
|
}: {
|
|
|
|
linkurl?: string
|
|
|
|
title: string
|
2020-07-08 01:31:03 +02:00
|
|
|
date?: string
|
2020-06-01 16:07:56 +02:00
|
|
|
updated?: string
|
2020-07-19 13:31:27 +02:00
|
|
|
className?: string
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2018-07-21 23:30:16 +02:00
|
|
|
const linkHostname = linkurl ? new URL(linkurl).hostname : null
|
|
|
|
|
2020-07-19 13:31:27 +02:00
|
|
|
return linkurl ? (
|
2019-10-02 13:35:50 +02:00
|
|
|
<>
|
2022-11-11 03:31:54 +01:00
|
|
|
<h1
|
|
|
|
className={`${styles.title} ${styles.titleLink} ${
|
|
|
|
className && className
|
|
|
|
}`}
|
|
|
|
>
|
2018-07-21 23:30:16 +02:00
|
|
|
<a href={linkurl} title={`Go to source: ${linkurl}`}>
|
2019-11-15 22:10:53 +01:00
|
|
|
{title} <Icon name="ExternalLink" />
|
2018-07-21 23:30:16 +02:00
|
|
|
</a>
|
|
|
|
</h1>
|
2022-11-11 03:31:54 +01:00
|
|
|
<div className={styles.linkurl}>{linkHostname}</div>
|
2019-10-02 13:35:50 +02:00
|
|
|
</>
|
2018-07-19 16:49:20 +02:00
|
|
|
) : (
|
2020-06-01 16:07:56 +02:00
|
|
|
<>
|
2022-11-11 03:31:54 +01:00
|
|
|
<h1 className={`${styles.title} ${className && className}`}>{title}</h1>
|
2021-03-01 00:03:39 +01:00
|
|
|
{date && <PostDate date={date} updated={updated} />}
|
2020-06-01 16:07:56 +02:00
|
|
|
</>
|
2018-07-19 16:49:20 +02:00
|
|
|
)
|
2018-07-21 23:30:16 +02:00
|
|
|
}
|