forked from iarv/mesh-forge
65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
import { CheckCircle2 } from "lucide-react"
|
|
|
|
interface BuilderHeaderProps {
|
|
preselectedPlugin?: {
|
|
name: string
|
|
description: string
|
|
imageUrl?: string
|
|
featured?: boolean
|
|
includes?: string[]
|
|
} | null
|
|
}
|
|
|
|
export function BuilderHeader({ preselectedPlugin }: BuilderHeaderProps) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
<div>
|
|
<p className="text-sm uppercase tracking-wider text-slate-500">
|
|
{preselectedPlugin ? "Plugin build" : "Quick build"}
|
|
</p>
|
|
<h1 className="text-4xl font-bold mt-1">
|
|
{preselectedPlugin ? `Build firmware for ${preselectedPlugin.name}` : "Flash a custom firmware version"}
|
|
</h1>
|
|
<p className="text-slate-400 mt-2 max-w-2xl">
|
|
{preselectedPlugin
|
|
? `Select a compatible Meshtastic target and configure your build for ${preselectedPlugin.name}. We'll send you to the build status page as soon as it starts.`
|
|
: "Choose your Meshtastic target, adjust optional modules, and queue a new build instantly. We'll send you to the build status page as soon as it starts."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{preselectedPlugin && (
|
|
<div className="bg-slate-900/60 border border-slate-800 rounded-2xl p-6">
|
|
<div className="flex items-start gap-4">
|
|
<CheckCircle2 className="w-8 h-8 text-green-400 shrink-0 mt-1" />
|
|
<div className="flex items-start gap-4 flex-1">
|
|
{preselectedPlugin.imageUrl && (
|
|
<img
|
|
src={preselectedPlugin.imageUrl}
|
|
alt={`${preselectedPlugin.name} logo`}
|
|
className="w-16 h-16 rounded-lg object-contain shrink-0"
|
|
/>
|
|
)}
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<h2 className="text-2xl font-bold">{preselectedPlugin.name}</h2>
|
|
{preselectedPlugin.featured && (
|
|
<span className="px-2 py-1 text-xs font-medium text-green-400 bg-green-400/10 border border-green-400/20 rounded">
|
|
Featured
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-slate-400 mb-3">{preselectedPlugin.description}</p>
|
|
{preselectedPlugin.includes && preselectedPlugin.includes.length > 0 && (
|
|
<p className="text-sm text-slate-500">Compatible with: {preselectedPlugin.includes.join(", ")}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|