38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { AppState } from '@/UIModels/AppState'
|
|
import { formatSizeToReadableString } from '@standardnotes/filepicker'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent } from 'preact'
|
|
import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
|
|
|
|
type Props = {
|
|
appState: AppState
|
|
}
|
|
|
|
export const FilesSection: FunctionComponent<Props> = observer(({ appState }) => {
|
|
if (!appState.features.isEntitledToFiles) {
|
|
return null
|
|
}
|
|
|
|
const filesQuotaUsed = appState.files.filesQuotaUsed
|
|
const filesQuotaTotal = appState.files.filesQuotaTotal
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<Title>Files</Title>
|
|
<Subtitle>Storage Quota</Subtitle>
|
|
<div className="mt-1 mb-1">
|
|
<span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
|
|
<span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
|
|
</div>
|
|
<progress
|
|
className="w-full progress-bar"
|
|
aria-label="Files storage used"
|
|
value={appState.files.filesQuotaUsed}
|
|
max={filesQuotaTotal}
|
|
/>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
)
|
|
})
|