frontend/src/components/modals/PluginInstallProgress.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { Field, ProgressBar } from '@decky/ui';
import { FC } from 'react';

interface PluginInstallProgressProps {
  percentage: number;
  operationText: string | null;
}

const PluginInstallProgress: FC<PluginInstallProgressProps> = ({ percentage, operationText }) => {
  return (
    <div style={{ width: '100%', margin: '16px 0 0' }}>
      <Field bottomSeparator="none" childrenLayout="below" focusable={false} padding="standard">
        <div style={{ width: '100%' }}>
          <div
            style={{
              minHeight: '22px',
              width: '100%',
              textAlign: 'left',
              textTransform: 'uppercase',
            }}
          >
            {operationText}
          </div>
          <ProgressBar focusable={false} nProgress={percentage} />
        </div>
      </Field>
    </div>
  );
};

export default PluginInstallProgress;