Jean-Luc Makiola
cd85715d05
- Extend uiStore with showAuthPrompt/openAuthPrompt/closeAuthPrompt state - Create AuthPromptModal component with sign in/sign up CTAs pointing to /login - Add usePublicSetup hook to useSetups for anonymous setup viewing via public API - Rework useOnboardingComplete to accept enabled param (guards auth-gated call)
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { useUIStore } from "../stores/uiStore";
|
|
|
|
export function AuthPromptModal() {
|
|
const showAuthPrompt = useUIStore((s) => s.showAuthPrompt);
|
|
const closeAuthPrompt = useUIStore((s) => s.closeAuthPrompt);
|
|
|
|
if (!showAuthPrompt) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div
|
|
className="absolute inset-0 bg-black/30"
|
|
onClick={closeAuthPrompt}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Escape") closeAuthPrompt();
|
|
}}
|
|
/>
|
|
<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
Join GearBox
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
To manage your own collection, sign in or sign up.
|
|
</p>
|
|
<div className="flex flex-col gap-3">
|
|
<Link
|
|
to="/login"
|
|
className="w-full text-center px-4 py-2.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
|
|
onClick={closeAuthPrompt}
|
|
>
|
|
Sign in
|
|
</Link>
|
|
<Link
|
|
to="/login"
|
|
className="w-full text-center px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
|
onClick={closeAuthPrompt}
|
|
>
|
|
Create account
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|