watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Implement react-basics styles. Fix queries.

Browse source
This commit is contained in:
Mike Cao 2022-12-08 23:43:43 -08:00
parent b57ecf33e6
commit 0a6ecfe3d2
59 changed files with 227 additions and 4336 deletions
Download patch file Download diff file Expand all files Collapse all files

62
components/metrics/WebsiteHeader.js
View file

@ -1,57 +1,29 @@
import Arrow from 'assets/arrow-right.svg';
import classNames from 'classnames';
import { Row, Column } from 'react-basics';
import Favicon from 'components/common/Favicon';
import Link from 'components/common/Link';
import OverflowText from 'components/common/OverflowText';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
import PageHeader from 'components/layout/PageHeader';
import { FormattedMessage } from 'react-intl';
import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
const header = showLink ? (
<>
<Favicon domain={domain} />
<Link
className={styles.titleLink}
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Link>
</>
) : (
<>
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
);
export default function WebsiteHeader({ websiteId, title, domain }) {
return (
<PageHeader className="row">
<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')}>
<ActiveUsers websiteId={websiteId} />
</div>
<div className="col-2 col-lg-4 order-2 order-lg-3">
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
{showLink && (
<Link
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
className={styles.link}
icon={<Arrow />}
size="small"
iconRight
>
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Link>
)}
</ButtonLayout>
</div>
<PageHeader>
<Row>
<Column className={styles.title} xs={12} sm={12} md={4} lg={4}>
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Column>
<Column className={styles.active} xs={12} sm={12} md={4} lg={4}>
<ActiveUsers websiteId={websiteId} />
</Column>
<Column xs={12} sm={12} md={4} lg={4}>
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
</ButtonLayout>
</Column>
</Row>
</PageHeader>
);
}