69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { FileCog } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { useOnboarding } from '../store'
|
|
|
|
/**
|
|
* Second step in the onboarding flow
|
|
* Handles deployment configuration and environment setup
|
|
*
|
|
* Features:
|
|
* - Deployment type selection (auction/LRN)
|
|
* - Environment variable configuration
|
|
* - Account selection
|
|
*
|
|
* @component
|
|
*/
|
|
export function ConfigureStep() {
|
|
const { formData, setFormData } = useOnboarding()
|
|
const [activeTab, setActiveTab] = useState<'create-auction' | 'deployer-lrn'>(
|
|
'create-auction'
|
|
)
|
|
const [environments, setEnvironments] = useState({
|
|
production: false,
|
|
preview: false,
|
|
development: false
|
|
})
|
|
|
|
// const handleEnvironmentChange = (env: keyof typeof environments) => {
|
|
// setEnvironments((prev) => ({
|
|
// ...prev,
|
|
// [env]: !prev[env],
|
|
// }))
|
|
// setFormData({
|
|
// environmentVars: {
|
|
// ...formData.environmentVars,
|
|
// [env]: !environments[env],
|
|
// },
|
|
// })
|
|
// }
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="max-w-2xl mx-auto space-y-8">
|
|
<div className="flex flex-col items-center justify-center w-full max-w-[445px] mx-auto">
|
|
<div className="w-full flex flex-col items-center gap-6">
|
|
{/* Header section with icon and description */}
|
|
<div className="flex flex-col items-center gap-1">
|
|
<FileCog className="w-16 h-16 text-foreground" />
|
|
|
|
<div className="flex flex-col items-center gap-1">
|
|
<h2 className="text-2xl font-bold text-foreground">
|
|
Configure
|
|
</h2>
|
|
<p className="text-base text-muted-foreground text-center">
|
|
Set the deployer LRN for a single deployment or by creating a
|
|
deployer auction for multiple deployments
|
|
</p>
|
|
</div>
|
|
</div>
|
|
Content sections will be placed here: 1. Deployment type tabs
|
|
(auction/LRN) 2. Configuration forms 3. Environment variables 4.
|
|
Account selection ...content here/
|
|
{/* <Configure /> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|