35 lines
1.9 KiB
TypeScript
35 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Bot, Send } from "lucide-react";
|
|
import { Button } from "@/components/ui/Button";
|
|
|
|
const answers: Record<string, string> = {
|
|
"Can I spend $200 this weekend?": "Yes, but keep it under $154 if you want to stay on pace for your emergency-fund goal.",
|
|
"Why did my score move?": "Utilization dropped from 34% to 27%, which likely helped your FICO 8 estimate. Keep cards below 30% before statement close.",
|
|
"Which card for groceries?": "Use Sapphire Preferred for groceries this week. It beats your flat 2% card based on current bonus categories."
|
|
};
|
|
|
|
export function AskAartha() {
|
|
const [open, setOpen] = useState(false);
|
|
const [message, setMessage] = useState("Can I spend $200 this weekend?");
|
|
|
|
return (
|
|
<div className="fixed bottom-5 right-5 z-50">
|
|
{open ? (
|
|
<div className="mb-3 w-[min(380px,calc(100vw-40px))] rounded-lg border border-forest/10 bg-paper p-4 shadow-soft dark:border-white/10 dark:bg-[#10231d]">
|
|
<div className="flex items-center gap-2 font-bold text-ink dark:text-paper"><Bot size={18} /> Ask Aartha</div>
|
|
<div className="mt-4 rounded-lg bg-forest/8 p-3 text-sm leading-6 text-ink/70 dark:bg-white/10 dark:text-paper/70">{answers[message]}</div>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{Object.keys(answers).map((prompt) => (
|
|
<button key={prompt} onClick={() => setMessage(prompt)} className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-forest ring-1 ring-forest/10 dark:bg-white/10 dark:text-mint dark:ring-white/10">{prompt}</button>
|
|
))}
|
|
</div>
|
|
<p className="mt-3 text-xs text-ink/45 dark:text-paper/45">Educational guidance only, not regulated financial advice.</p>
|
|
</div>
|
|
) : null}
|
|
<Button onClick={() => setOpen((value) => !value)}><Send size={17} /> Ask Aartha</Button>
|
|
</div>
|
|
);
|
|
}
|