import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useRouter } from 'next/router'; import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; import ActiveUsers from './ActiveUsers'; import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteHeader.module.css'; import RefreshButton from '../common/RefreshButton'; import ButtonLayout from '../layout/ButtonLayout'; export default function WebsiteHeader({ websiteId, title, showLink = false }) { const router = useRouter(); return ( <PageHeader> <div className={styles.title}>{title}</div> <ActiveUsers className={styles.active} websiteId={websiteId} /> <ButtonLayout> <RefreshButton websiteId={websiteId} /> {showLink && ( <Button icon={<Arrow />} onClick={() => router.push('/website/[...id]', `/website/${websiteId}/${title}`, { shallow: true, }) } size="small" > <div> <FormattedMessage id="button.view-details" defaultMessage="View details" /> </div> </Button> )} </ButtonLayout> </PageHeader> ); }