refactor(infra): directory structure (#4615)

2026-08-07 04:20:11 +08:00 · 2023-10-18 23:30:08 +08:00
parent 814d552be8
commit bed9310519
1150 changed files with 539 additions and 584 deletions
@@ -0,0 +1,81 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import * as styles from './share.css';
+
+export interface StorageProgressProgress {
+  max: number;
+  value: number;
+  onUpgrade: () => void;
+}
+
+const transformBytesToMB = (bytes: number) => {
+  return (bytes / 1024 / 1024).toFixed(2);
+};
+
+const transformBytesToGB = (bytes: number) => {
+  return (bytes / 1024 / 1024 / 1024).toFixed(2);
+};
+
+export const StorageProgress = ({
+  max: upperLimit,
+  value,
+  onUpgrade,
+}: StorageProgressProgress) => {
+  const t = useAFFiNEI18N();
+  const percent = useMemo(
+    () => Math.round((value / upperLimit) * 100),
+    [upperLimit, value]
+  );
+
+  const used = useMemo(() => transformBytesToMB(value), [value]);
+  const max = useMemo(() => transformBytesToGB(upperLimit), [upperLimit]);
+
+  return (
+    <>
+      <div className={styles.storageProgressContainer}>
+        <div className={styles.storageProgressWrapper}>
+          <div className="storage-progress-desc">
+            <span>{t['com.affine.storage.used.hint']()}</span>
+            <span>
+              {used}MB/{max}GB
+            </span>
+          </div>
+
+          <div className="storage-progress-bar-wrapper">
+            <div
+              className={clsx(styles.storageProgressBar, {
+                warning: percent > 80,
+                danger: percent > 99,
+              })}
+              style={{ width: `${percent}%` }}
+            ></div>
+          </div>
+        </div>
+
+        <Tooltip content={t['com.affine.storage.disabled.hint']()}>
+          <span tabIndex={0}>
+            <Button disabled onClick={onUpgrade}>
+              {t['com.affine.storage.upgrade']()}
+            </Button>
+          </span>
+        </Tooltip>
+      </div>
+      {percent > 80 ? (
+        <div className={styles.storageExtendHint}>
+          {t['com.affine.storage.extend.hint']()}
+          <a
+            href="https://community.affine.pro/c/insider-general/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t['com.affine.storage.extend.link']()}
+          </a>
+        </div>
+      ) : null}
+    </>
+  );
+};