spb/fetcha

1import Link from "next/link";2import { ArrowRight, Sparkles } from "lucide-react";3import { Button } from "@/components/ui/button";4import { cn } from "@/lib/utils";56/**7 * Small server component the overview can render when `user.onboardingCompletedAt` is null.8 * Pure presentation — pass `completedAt` and it returns null when onboarding is done.9 */10export function OnboardingBanner({ completedAt, userName, className }: { completedAt?: Date | null; userName?: string | null; className?: string }) {11  if (completedAt) return null;12  const first = userName?.trim().split(/\s+/)[0];13  return (14    <div className={cn("flex flex-col gap-3 rounded-lg border border-accent/30 bg-accent-soft/40 px-4 py-3 sm:flex-row sm:items-center", className)}>15      <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-bg shadow-xs">16        <Sparkles className="size-4 text-accent" aria-hidden />17      </div>18      <div className="min-w-0 flex-1 text-[13.5px]">19        <div className="font-medium">{first ? `Welcome, ${first}.` : "Welcome to Fetcha."} Finish setting up in about two minutes.</div>20        <div className="text-fg-muted">Create an API key, run your first request and grab the generated code for your stack.</div>21      </div>22      <Button asChild size="sm" variant="primary" className="shrink-0">23        <Link href="/dashboard/onboarding">24          Continue setup <ArrowRight />25        </Link>26      </Button>27    </div>28  );29}30