changed onboarding card design to match designs and remove card

This commit is contained in:
Lucas Oliveira 2025-10-22 17:46:32 -03:00
parent 9c4a978c89
commit 1e8be3b075

View file

@ -25,6 +25,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { AnimatedProviderSteps } from "./animated-provider-steps"; import { AnimatedProviderSteps } from "./animated-provider-steps";
import { IBMOnboarding } from "./ibm-onboarding"; import { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding"; import { OllamaOnboarding } from "./ollama-onboarding";
@ -157,32 +158,42 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
exit={{ opacity: 0, y: -24 }} exit={{ opacity: 0, y: -24 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<Card <div className={`w-full max-w-[600px] flex flex-col gap-6`}>
className={`w-full max-w-[600px] ${
updatedOnboarding ? "border-none" : ""
}`}
>
<Tabs <Tabs
defaultValue={modelProvider} defaultValue={modelProvider}
onValueChange={handleSetModelProvider} onValueChange={handleSetModelProvider}
> >
<CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}> <TabsList className="mb-4">
<TabsList> <TabsTrigger
<TabsTrigger value="openai"> value="openai"
<OpenAILogo className="w-4 h-4" /> >
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
</div>
OpenAI OpenAI
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="watsonx"> <TabsTrigger
<IBMLogo className="w-4 h-4" /> value="watsonx"
>
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
</div>
IBM watsonx.ai IBM watsonx.ai
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="ollama"> <TabsTrigger
<OllamaLogo className="w-4 h-4" /> value="ollama"
>
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
<OllamaLogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
)}
/>
</div>
Ollama Ollama
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</CardHeader>
<CardContent className={`${updatedOnboarding ? "px-0" : ""}`}>
<TabsContent value="openai"> <TabsContent value="openai">
<OpenAIOnboarding <OpenAIOnboarding
setSettings={setSettings} setSettings={setSettings}
@ -204,11 +215,8 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
/> />
</TabsContent> </TabsContent>
</CardContent>
</Tabs> </Tabs>
<CardFooter
className={`flex ${updatedOnboarding ? "px-0" : "justify-end"}`}
>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div> <div>
@ -232,8 +240,7 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
</TooltipContent> </TooltipContent>
)} )}
</Tooltip> </Tooltip>
</CardFooter> </div>
</Card>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div