Move and rename files (2/4) (#987)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/document-read-only-page/document-infobar.tsx

@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { DateTime } from 'luxon'
+import React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { InternalLink } from '../common/links/internal-link'
+import { ShowIf } from '../common/show-if/show-if'
+import {
+  DocumentInfoLineWithTimeMode,
+  DocumentInfoTimeLine
+} from '../editor-page/document-bar/document-info/document-info-time-line'
+import './document-infobar.scss'
+
+export interface DocumentInfobarProps {
+  changedAuthor: string
+  changedTime: DateTime
+  createdAuthor: string
+  createdTime: DateTime
+  editable: boolean
+  noteId: string
+  viewCount: number
+}
+
+export const DocumentInfobar: React.FC<DocumentInfobarProps> = ({
+  changedAuthor,
+  changedTime,
+  createdAuthor,
+  createdTime,
+  editable,
+  noteId,
+  viewCount
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={'d-flex flex-row my-3 document-infobar'}>
+      <div className={'col-md'}>&nbsp;</div>
+      <div className={'d-flex flex-fill'}>
+        <div className={'d-flex flex-column'}>
+          <DocumentInfoTimeLine
+            mode={DocumentInfoLineWithTimeMode.CREATED}
+            time={createdTime}
+            userName={createdAuthor}
+            profileImageSrc={'/img/avatar.png'}/>
+          <DocumentInfoTimeLine
+            mode={DocumentInfoLineWithTimeMode.EDITED}
+            time={changedTime}
+            userName={changedAuthor}
+            profileImageSrc={'/img/avatar.png'}/>
+          <hr/>
+        </div>
+        <span className={'ml-auto'}>
+          { viewCount } <Trans i18nKey={'views.readOnly.viewCount'}/>
+          <ShowIf condition={editable}>
+            <InternalLink text={''} href={`/n/${noteId}`} icon={'pencil'} className={'text-primary text-decoration-none mx-1'} title={t('views.readOnly.editNote')}/>
+          </ShowIf>
+        </span>
+      </div>
+      <div className={'col-md'}>&nbsp;</div>
+    </div>
+  )
+}