# All files / src/components/settings StorageInfoCard.tsx

0% Statements 0/42
0% Branches 0/1
0% Functions 0/1
0% Lines 0/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43

     'use client'

    import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
    import { Alert, AlertDescription } from '@/components/ui/alert'

    interface StorageInfoCardProps {
      storageType?: 'indexeddb' | 'localstorage' | 'none'
    }

    export function StorageInfoCard({ storageType }: StorageInfoCardProps) {
      return (
        <Card>
          <CardHeader>
            <CardTitle>Storage Information</CardTitle>
            <CardDescription>
              How your data is stored
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Alert>
              <AlertDescription>
                {storageType === 'indexeddb' ? (
                  <>
                    <strong>IndexedDB</strong> is being used for storage. This provides better performance and
                    larger storage capacity compared to localStorage. Your data persists locally in your browser.
                  </>
                ) : storageType === 'localstorage' ? (
                  <>
                    <strong>localStorage</strong> is being used for storage. IndexedDB is not available in your
                    browser. Note that localStorage has a smaller storage limit (typically 5-10MB).
                  </>
                ) : (
                  <>
                    No persistent storage detected. Your data will be lost when you close the browser.
                  </>
                )}
              </AlertDescription>
            </Alert>
          </CardContent>
        </Card>
      )
    }