import { ExternalLink } from 'react-external-link'; import { UncontrolledTooltip } from 'reactstrap'; import { Time } from '../../src/utils/dates/Time'; import type { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail'; import type { ShortUrlVisits } from './reducers/shortUrlVisits'; import { VisitsHeader } from './VisitsHeader'; import './ShortUrlVisitsHeader.scss'; interface ShortUrlVisitsHeaderProps { shortUrlDetail: ShortUrlDetail; shortUrlVisits: ShortUrlVisits; goBack: () => void; } export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortUrlVisitsHeaderProps) => { const { shortUrl, loading } = shortUrlDetail; const { visits } = shortUrlVisits; const shortLink = shortUrl?.shortUrl ?? ''; const longLink = shortUrl?.longUrl ?? ''; const title = shortUrl?.title; const renderDate = () => (!shortUrl ? Loading... : ( )); const visitsStatsTitle = <>Visits for ; return (
Created: {renderDate()}
{`${title ? 'Title' : 'Long URL'}: `} {loading && Loading...} {!loading && {title ?? longLink}}
); };