FollowArms onboarding step - Select which arms to follow
cgen-0578f41f3dae4c33977910cc64b71081
This commit is contained in:
Builder.io
parent
402830ac55
commit
b1fcd38ee0
1 changed files with 190 additions and 0 deletions
190
client/components/onboarding/FollowArms.tsx
Normal file
190
client/components/onboarding/FollowArms.tsx
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import {
|
||||||
|
Zap,
|
||||||
|
Gamepad2,
|
||||||
|
Briefcase,
|
||||||
|
BookOpen,
|
||||||
|
Network,
|
||||||
|
Sparkles,
|
||||||
|
Shield,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface FollowArmsProps {
|
||||||
|
selectedArms: string[];
|
||||||
|
onUpdate: (arms: string[]) => void;
|
||||||
|
nextStep: () => void;
|
||||||
|
prevStep: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ARMS = [
|
||||||
|
{
|
||||||
|
id: "labs",
|
||||||
|
name: "AeThex Labs",
|
||||||
|
icon: Zap,
|
||||||
|
color: "text-yellow-400",
|
||||||
|
bgColor: "bg-yellow-500/10",
|
||||||
|
borderColor: "border-yellow-500/30",
|
||||||
|
description: "Research, innovation, and experimental tech",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "gameforge",
|
||||||
|
name: "GameForge",
|
||||||
|
icon: Gamepad2,
|
||||||
|
color: "text-green-400",
|
||||||
|
bgColor: "bg-green-500/10",
|
||||||
|
borderColor: "border-green-500/30",
|
||||||
|
description: "Game development and interactive experiences",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "corp",
|
||||||
|
name: "AeThex Corp",
|
||||||
|
icon: Briefcase,
|
||||||
|
color: "text-blue-400",
|
||||||
|
bgColor: "bg-blue-500/10",
|
||||||
|
borderColor: "border-blue-500/30",
|
||||||
|
description: "Enterprise consulting and professional services",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "foundation",
|
||||||
|
name: "AeThex Foundation",
|
||||||
|
icon: BookOpen,
|
||||||
|
color: "text-red-400",
|
||||||
|
bgColor: "bg-red-500/10",
|
||||||
|
borderColor: "border-red-500/30",
|
||||||
|
description: "Education, mentorship, and community building",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "devlink",
|
||||||
|
name: "Dev-Link",
|
||||||
|
icon: Network,
|
||||||
|
color: "text-cyan-400",
|
||||||
|
bgColor: "bg-cyan-500/10",
|
||||||
|
borderColor: "border-cyan-500/30",
|
||||||
|
description: "Professional networking and opportunities",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "nexus",
|
||||||
|
name: "NEXUS",
|
||||||
|
icon: Sparkles,
|
||||||
|
color: "text-purple-400",
|
||||||
|
bgColor: "bg-purple-500/10",
|
||||||
|
borderColor: "border-purple-500/30",
|
||||||
|
description: "Creative marketplace and artist collaboration",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FollowArms({
|
||||||
|
selectedArms,
|
||||||
|
onUpdate,
|
||||||
|
nextStep,
|
||||||
|
prevStep,
|
||||||
|
}: FollowArmsProps) {
|
||||||
|
const [localSelection, setLocalSelection] = useState(selectedArms);
|
||||||
|
|
||||||
|
const handleToggle = (armId: string) => {
|
||||||
|
setLocalSelection((prev) =>
|
||||||
|
prev.includes(armId) ? prev.filter((a) => a !== armId) : [...prev, armId]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
if (localSelection.length === 0) {
|
||||||
|
alert("Please select at least one arm to follow");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onUpdate(localSelection);
|
||||||
|
nextStep();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Choose which AeThex arms you want to follow. You can change this
|
||||||
|
anytime in your settings. Select at least one to continue.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arms Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{ARMS.map((arm) => {
|
||||||
|
const Icon = arm.icon;
|
||||||
|
const isSelected = localSelection.includes(arm.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={arm.id} className="relative">
|
||||||
|
<Card
|
||||||
|
className={`cursor-pointer border-2 transition-all duration-200 hover:border-opacity-100 ${
|
||||||
|
isSelected
|
||||||
|
? `${arm.borderColor} bg-${arm.color}/5`
|
||||||
|
: "border-border/40 hover:border-border/60"
|
||||||
|
}`}
|
||||||
|
onClick={() => handleToggle(arm.id)}
|
||||||
|
>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<Icon className={`h-5 w-5 ${arm.color}`} />
|
||||||
|
<h3 className="font-semibold text-foreground">
|
||||||
|
{arm.name}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{arm.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
onCheckedChange={() => handleToggle(arm.id)}
|
||||||
|
className="mt-1"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
{localSelection.length > 0 && (
|
||||||
|
<Card className="bg-aethex-500/10 border-aethex-400/30">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<p className="text-sm text-aethex-200">
|
||||||
|
You're following <span className="font-bold">{localSelection.length}</span> arm
|
||||||
|
{localSelection.length !== 1 ? "s" : ""}
|
||||||
|
{localSelection.length > 0 && ":"}
|
||||||
|
<span className="ml-2">
|
||||||
|
{localSelection
|
||||||
|
.map(
|
||||||
|
(id) =>
|
||||||
|
ARMS.find((a) => a.id === id)?.name || id
|
||||||
|
)
|
||||||
|
.join(", ")}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<Button variant="outline" onClick={prevStep} className="flex-1">
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleContinue}
|
||||||
|
className="flex-1 bg-gradient-to-r from-aethex-600 to-neon-blue hover:from-aethex-700 hover:to-neon-blue/90"
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue