Extract shlink-web-component outside of src folder

shlink-web-component/visits/ShortUrlVisitsHeader.tsx

@@ -0,0 +1,45 @@
+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 ? <small>Loading...</small> : (
+    <span>
+      <b id="created" className="short-url-visits-header__created-at">
+        <Time date={shortUrl.dateCreated} relative />
+      </b>
+      <UncontrolledTooltip placement="bottom" target="created">
+        <Time date={shortUrl.dateCreated} />
+      </UncontrolledTooltip>
+    </span>
+  ));
+  const visitsStatsTitle = <>Visits for <ExternalLink href={shortLink} /></>;
+
+  return (
+    <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}>
+      <hr />
+      <div>Created: {renderDate()}</div>
+      <div className="long-url-container">
+        {`${title ? 'Title' : 'Long URL'}: `}
+        {loading && <small>Loading...</small>}
+        {!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}
+      </div>
+    </VisitsHeader>
+  );
+};