all

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-create-time.tsx

@@ -0,0 +1,19 @@
+import { Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+import prettyDate from '@/helpers/pretty-date'
+
+export type FileInfoCreateTimeProps = {
+  file: File
+}
+
+const FileInfoCreateTime = ({ file }: FileInfoCreateTimeProps) => (
+  <Stat>
+    <StatLabel>Create time</StatLabel>
+    <StatNumber className={cx('text-base')}>
+      {prettyDate(file.createTime)}
+    </StatNumber>
+  </Stat>
+)
+
+export default FileInfoCreateTime

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-extension.tsx

@@ -0,0 +1,23 @@
+import { Badge, Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+
+export type FileInfoExtensionProps = {
+  file: File
+}
+
+const FileInfoExtension = ({ file }: FileInfoExtensionProps) => {
+  if (!file.original) {
+    return null
+  }
+  return (
+    <Stat>
+      <StatLabel>File type</StatLabel>
+      <StatNumber className={cx('text-base')}>
+        <Badge>{file.original.extension}</Badge>
+      </StatNumber>
+    </Stat>
+  )
+}
+
+export default FileInfoExtension

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-image.tsx

@@ -0,0 +1,23 @@
+import { Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+
+export type FileInfoImageProps = {
+  file: File
+}
+
+const FileInfoImage = ({ file }: FileInfoImageProps) => {
+  if (!file.original?.image) {
+    return null
+  }
+  return (
+    <Stat>
+      <StatLabel>Image dimensions</StatLabel>
+      <StatNumber className={cx('text-base')}>
+        {file.original.image.width}x{file.original.image.height}
+      </StatNumber>
+    </Stat>
+  )
+}
+
+export default FileInfoImage

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-permission.tsx

@@ -0,0 +1,18 @@
+import { Badge, Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+
+export type FileInfoPermissionProps = {
+  file: File
+}
+
+const FileInfoPermission = ({ file }: FileInfoPermissionProps) => (
+  <Stat>
+    <StatLabel>Permission</StatLabel>
+    <StatNumber className={cx('text-base')}>
+      <Badge>{file.permission}</Badge>
+    </StatNumber>
+  </Stat>
+)
+
+export default FileInfoPermission

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-size.tsx

@@ -0,0 +1,24 @@
+import { Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+import prettyBytes from '@/helpers/pretty-bytes'
+
+export type FileInfoSizeProps = {
+  file: File
+}
+
+const FileInfoSize = ({ file }: FileInfoSizeProps) => {
+  if (!file.original) {
+    return null
+  }
+  return (
+    <Stat>
+      <StatLabel>File size</StatLabel>
+      <StatNumber className={cx('text-base')}>
+        {prettyBytes(file.original.size)}
+      </StatNumber>
+    </Stat>
+  )
+}
+
+export default FileInfoSize

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-storage-usage.tsx

@@ -0,0 +1,39 @@
+import { Progress, Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+import StorageAPI from '@/client/api/storage'
+import prettyBytes from '@/helpers/pretty-bytes'
+
+export type FileInfoStorageUsageProps = {
+  file: File
+}
+
+const FileInfoStorageUsage = ({ file }: FileInfoStorageUsageProps) => {
+  const { data, error } = StorageAPI.useGetFileUsage(file.id)
+  return (
+    <Stat>
+      <StatLabel>Storage usage</StatLabel>
+      <StatNumber className={cx('text-base')}>
+        <div className={cx('flex', 'flex-col', 'gap-0.5')}>
+          {error && <span className={cx('text-red-500')}>Failed to load.</span>}
+          {data && !error && (
+            <>
+              <span>
+                {prettyBytes(data.bytes)} of {prettyBytes(data.maxBytes)} used
+              </span>
+              <Progress size="sm" value={data.percentage} hasStripe />
+            </>
+          )}
+          {!data && !error && (
+            <>
+              <span>Calculating…</span>
+              <Progress size="sm" value={0} hasStripe />
+            </>
+          )}
+        </div>
+      </StatNumber>
+    </Stat>
+  )
+}
+
+export default FileInfoStorageUsage

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/file-info-update-time.tsx

@@ -0,0 +1,28 @@
+import { Stat, StatLabel, StatNumber } from '@chakra-ui/react'
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+import prettyDate from '@/helpers/pretty-date'
+
+export type FileInfoUpdateTimeProps = {
+  file: File
+}
+
+const FileInfoUpdateTime = ({ file }: FileInfoUpdateTimeProps) => {
+  if (
+    !file.updateTime ||
+    (file.updateTime &&
+      file.createTime.includes(file.updateTime.replaceAll('Z', '')))
+  ) {
+    return null
+  }
+  return (
+    <Stat>
+      <StatLabel>Update time</StatLabel>
+      <StatNumber className={cx('text-base')}>
+        {prettyDate(file.updateTime)}
+      </StatNumber>
+    </Stat>
+  )
+}
+
+export default FileInfoUpdateTime

Downloads/Voltaserve/ui/src/components/viewer/drawer/file-info/index.tsx

@@ -0,0 +1,32 @@
+import cx from 'classnames'
+import { File } from '@/client/api/file'
+import FileInfoCreateTime from './file-info-create-time'
+import FileInfoExtension from './file-info-extension'
+import FileInfoImage from './file-info-image'
+import FileInfoPermission from './file-info-permission'
+import FileInfoSize from './file-info-size'
+import FileInfoStorageUsage from './file-info-storage-usage'
+import FileInfoUpdateTime from './file-info-update-time'
+
+export type DrawerFileInfoProps = {
+  file: File
+}
+
+const DrawerFileInfo = ({ file }: DrawerFileInfoProps) => {
+  if (!file.original) {
+    return null
+  }
+  return (
+    <div className={cx('flex', 'flex-col', 'gap-1')}>
+      <FileInfoImage file={file} />
+      <FileInfoSize file={file} />
+      <FileInfoExtension file={file} />
+      <FileInfoStorageUsage file={file} />
+      <FileInfoPermission file={file} />
+      <FileInfoCreateTime file={file} />
+      <FileInfoUpdateTime file={file} />
+    </div>
+  )
+}
+
+export default DrawerFileInfo