import { Head, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import InstallerLayout from '@/Layouts/InstallerLayout'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { InfoIcon } from 'lucide-react'; interface Props { sqliteAvailable: boolean; } export default function Database({ sqliteAvailable }: Props) { const { errors } = usePage().props as { errors: Record }; const [dbType, setDbType] = useState<'mysql' | 'sqlite'>('mysql'); const [submitting, setSubmitting] = useState(false); return (

Configure your database connection. Make sure the database exists before continuing.

{errors.database && ( {errors.database} )}
setSubmitting(true)} className="space-y-4" >
{errors.db_type && (

{errors.db_type}

)}
{dbType === 'mysql' && ( <>
{errors.host && (

{errors.host}

)}
{errors.port && (

{errors.port}

)}
{errors.database && (

{errors.database}

)}
{errors.username && (

{errors.username}

)}

Leave blank if your database has no password

{errors.password && (

{errors.password}

)}
)} {dbType === 'sqlite' && ( SQLite database will be created automatically at{' '} database/database.sqlite )}
); }