umami/components/metrics/WebsiteHeader.js

59 lines
2.0 KiB
JavaScript
Raw Normal View History

2020-08-18 09:51:32 +02:00
import React from 'react';
2022-03-02 04:28:44 +01:00
import classNames from 'classnames';
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';
import OverflowText from 'components/common/OverflowText';
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 }) {
2021-01-21 04:11:36 +01:00
const header = showLink ? (
2021-02-02 08:00:12 +01:00
<>
2021-01-20 21:13:30 +01:00
<Favicon domain={domain} />
<Link
className={styles.titleLink}
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
2021-02-02 08:00:12 +01:00
</Link>
</>
2021-01-20 21:13:30 +01:00
) : (
<>
2021-01-20 21:13:30 +01:00
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
2021-01-20 21:13:30 +01:00
);
2020-08-18 09:51:32 +02:00
return (
2022-03-02 04:28:44 +01:00
<PageHeader className="row">
2022-03-12 01:04:05 +01:00
<div className={classNames(styles.title, 'col-10 col-lg-4 order-1 order-lg-1')}>{header}</div>
<div className={classNames(styles.active, 'col-12 col-lg-4 order-3 order-lg-2')}>
2022-03-02 04:28:44 +01:00
<ActiveUsers websiteId={websiteId} />
</div>
2022-03-12 01:04:05 +01:00
<div className="col-2 col-lg-4 order-2 order-lg-3">
2022-03-02 04:28:44 +01:00
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
{showLink && (
<Link
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
2022-03-02 04:28:44 +01:00
className={styles.link}
icon={<Arrow />}
size="small"
iconRight
>
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Link>
)}
</ButtonLayout>
</div>
2020-08-18 09:51:32 +02:00
</PageHeader>
);
}