Added onboarding style for nudges

This commit is contained in:
Lucas Oliveira 2025-10-17 17:19:39 -03:00 committed by Mike Fortman
parent b38da01efe
commit 26aea23b4e

View file

@ -1,11 +1,13 @@
import { motion, AnimatePresence } from "motion/react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";
export default function Nudges({
nudges,
onboarding,
handleSuggestionClick,
}: {
nudges: string[];
onboarding?: boolean;
handleSuggestionClick: (suggestion: string) => void;
}) {
return (
@ -21,14 +23,25 @@ export default function Nudges({
ease: "easeInOut",
}}
>
<div className="relative px-6 pt-4 flex justify-center">
<div
className={
onboarding
? "relative flex"
: "relative px-6 pt-4 flex justify-center"
}
>
<div className="w-full max-w-[75%]">
<div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide">
{nudges.map((suggestion: string, index: number) => (
<button
key={index}
onClick={() => handleSuggestionClick(suggestion)}
className="px-2 py-1.5 bg-muted hover:bg-muted/50 rounded-lg text-sm text-placeholder-foreground hover:text-foreground transition-colors whitespace-nowrap"
className={cn(
onboarding
? "bg-background hover:bg-background/50 text-foreground border"
: "bg-muted hover:bg-muted/50 text-placeholder-foreground hover:text-foreground",
"px-2 py-1.5 rounded-lg text-sm transition-colors whitespace-nowrap",
)}
>
{suggestion}
</button>