File size: 1,565 Bytes
d5079dd 8122239 d5079dd e747505 8122239 1017875 ed2309d d5079dd e747505 d5079dd e747505 d5079dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { HfLogo } from "./HfLogo";
import reachyHackerUrl from "../assets/reachy-hacker.png";
interface SignInScreenProps {
onSignIn: () => void;
isSigningIn: boolean;
error: string | null;
hasClientId: boolean;
}
export function SignInScreen({
onSignIn,
isSigningIn,
error,
hasClientId,
}: SignInScreenProps) {
return (
<div className="signin-screen">
<div className="signin-hero" aria-hidden="true">
<img src={reachyHackerUrl} alt="" />
</div>
<h1 className="signin-title">Reachy Mini - Vibe Coding Apps</h1>
<p className="signin-subtitle">
<strong>Vibe-code</strong> browser-based apps for your Reachy Mini.
Describe what you want, preview it <strong>live</strong>, and ship it
as a <strong>Hugging Face Space</strong> in one click.
</p>
<button
type="button"
className="signin-button"
onClick={onSignIn}
disabled={isSigningIn || !hasClientId}
>
<HfLogo size={22} />
<span>
{isSigningIn ? "Redirecting…" : "Sign in with Hugging Face"}
</span>
</button>
{!hasClientId && (
<p className="signin-hint">
No OAuth client ID detected. On a Hugging Face Space this is injected
automatically via the Docker entrypoint. For local dev, create an
OAuth app and set <code>VITE_HF_OAUTH_CLIENT_ID</code> in{" "}
<code>frontend/.env.local</code>.
</p>
)}
{error && <div className="signin-error">{error}</div>}
</div>
);
}
|