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

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

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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75

     'use client'

    import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
    import { Button } from '@/components/ui/button'
    import { CloudCheck, CloudSlash } from '@phosphor-icons/react'

    interface BackendAutoConfigCardProps {
      envVarSet: boolean
      flaskUrl: string
      flaskConnectionStatus: 'unknown' | 'connected' | 'failed'
      testingConnection: boolean
      onTestConnection: () => Promise<void>
    }

    export function BackendAutoConfigCard({
      envVarSet,
      flaskUrl,
      flaskConnectionStatus,
      testingConnection,
      onTestConnection
    }: BackendAutoConfigCardProps) {
      if (!envVarSet) return null

      return (
        <Card className="border-accent">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-accent">
              <CloudCheck weight="fill" size={24} />
              Backend Auto-Configured
            </CardTitle>
            <CardDescription>
              Flask backend is configured via environment variable
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between py-2">
                <span className="text-sm text-muted-foreground">Backend URL</span>
                <code className="text-sm font-mono bg-muted px-2 py-1 rounded">{flaskUrl}</code>
              </div>
              <div className="flex items-center justify-between py-2">
                <span className="text-sm text-muted-foreground">Configuration Source</span>
                <code className="text-sm font-mono bg-muted px-2 py-1 rounded">NEXT_PUBLIC_FLASK_BACKEND_URL</code>
              </div>
              <div className="flex items-center justify-between py-2">
                <span className="text-sm text-muted-foreground">Status</span>
                {flaskConnectionStatus === 'connected' && (
                  <span className="flex items-center gap-2 text-sm text-green-600">
                    <CloudCheck weight="fill" size={16} />
                    Connected
                  </span>
                )}
                {flaskConnectionStatus === 'failed' && (
                  <span className="flex items-center gap-2 text-sm text-destructive">
                    <CloudSlash weight="fill" size={16} />
                    Connection Failed
                  </span>
                )}
                {flaskConnectionStatus === 'unknown' && (
                  <Button
                    onClick={onTestConnection}
                    variant="outline"
                    size="sm"
                    disabled={testingConnection}
                  >
                    {testingConnection ? 'Testing...' : 'Test Connection'}
                  </Button>
                )}
              </div>
            </div>
          </CardContent>
        </Card>
      )
    }