changed onboarding card design to match designs and remove card
This commit is contained in:
parent
9c4a978c89
commit
1e8be3b075
1 changed files with 212 additions and 205 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue