byarielm.fyi
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
1import React from "react";
2import { Settings, ChevronRight } from "lucide-react";
3
4export type SetupPromptVariant = "banner" | "button";
5
6interface SetupPromptProps {
7 variant?: SetupPromptVariant;
8 isCompleted: boolean;
9 onShowWizard: () => void;
10 className?: string;
11}
12
13const SetupPrompt: React.FC<SetupPromptProps> = ({
14 variant = "button",
15 isCompleted,
16 onShowWizard,
17 className = "",
18}) => {
19 if (isCompleted) return null;
20
21 if (variant === "banner") {
22 return (
23 <div
24 className={`mb-3 rounded-2xl bg-firefly-banner-dark p-6 text-white dark:bg-firefly-banner-dark ${className}`}
25 >
26 <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
27 <div className="flex-1">
28 <h2 className="mb-2 text-2xl font-bold">
29 Need help getting started?
30 </h2>
31 <p className="text-white">
32 Run the setup assistant to configure your preferences in minutes.
33 </p>
34 </div>
35 <button
36 onClick={onShowWizard}
37 className="flex items-center space-x-2 whitespace-nowrap rounded-xl bg-white px-6 py-3 font-semibold text-slate-900 shadow-lg transition-all hover:bg-slate-100"
38 >
39 <span>Start Setup</span>
40 <ChevronRight className="size-4" />
41 </button>
42 </div>
43 </div>
44 );
45 }
46
47 return (
48 <button
49 onClick={onShowWizard}
50 className={`text-md flex items-center space-x-1 font-medium text-orange-650 transition-colors hover:text-orange-500 dark:text-amber-400 dark:hover:text-amber-300 ${className}`}
51 >
52 <Settings className="size-4" />
53 <span>Configure</span>
54 </button>
55 );
56};
57
58export default SetupPrompt;