umami/components/metrics/WebsiteHeader.js

38 lines
1.2 KiB
JavaScript
Raw Normal View History

2020-08-18 09:51:32 +02:00
import React from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-09-16 04:16:05 +02:00
import Link from 'components/common/Link';
2020-08-18 09:51:32 +02:00
import PageHeader from 'components/layout/PageHeader';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
2020-10-21 15:44:43 +02:00
import Favicon from 'components/common/Favicon';
2020-08-18 09:51:32 +02:00
import ActiveUsers from './ActiveUsers';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteHeader.module.css';
2020-10-21 15:44:43 +02:00
export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
2020-08-18 09:51:32 +02:00
return (
<PageHeader>
2020-10-21 15:44:43 +02:00
<div className={styles.title}>
<Favicon domain={domain} />
{title}
</div>
2020-10-11 11:29:55 +02:00
<ActiveUsers className={styles.active} websiteId={websiteId} />
2020-09-22 06:34:55 +02:00
<ButtonLayout align="right">
2020-08-31 23:11:30 +02:00
<RefreshButton websiteId={websiteId} />
{showLink && (
2020-09-16 04:16:05 +02:00
<Link
href="/website/[...id]"
as={`/website/${websiteId}/${title}`}
className={styles.link}
2020-09-26 08:38:28 +02:00
icon={<Arrow />}
size="small"
iconRight
>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.view-details" defaultMessage="View details" />
2020-09-16 04:16:05 +02:00
</Link>
)}
</ButtonLayout>
2020-08-18 09:51:32 +02:00
</PageHeader>
);
}