refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/Preferences/Panes/Security/EncryptionEnabled.tsx

@@ -0,0 +1,39 @@
+import Icon from '@/Components/Icon/Icon'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'react'
+import EncryptionStatusItem from './EncryptionStatusItem'
+import { formatCount } from './formatCount'
+
+type Props = {
+  appState: AppState
+}
+
+const EncryptionEnabled: FunctionComponent<Props> = ({ appState }) => {
+  const count = appState.accountMenu.structuredNotesAndTagsCount
+  const notes = formatCount(count.notes, 'notes')
+  const tags = formatCount(count.tags, 'tags')
+  const archived = formatCount(count.archived, 'archived notes')
+  const deleted = formatCount(count.deleted, 'trashed notes')
+
+  const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />
+  const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />
+  const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />
+  const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />
+  return (
+    <>
+      <div className="flex flex-row items-start pb-1 pt-1.5">
+        <EncryptionStatusItem status={notes} icon={noteIcon} />
+        <div className="min-w-3" />
+        <EncryptionStatusItem status={tags} icon={tagIcon} />
+      </div>
+      <div className="flex flex-row items-start">
+        <EncryptionStatusItem status={archived} icon={archiveIcon} />
+        <div className="min-w-3" />
+        <EncryptionStatusItem status={deleted} icon={trashIcon} />
+      </div>
+    </>
+  )
+}
+
+export default observer(EncryptionEnabled)