function Settings({ user, jobContext, onJobChange, onLogout, darkMode = false, subscriptionPlan = "free", sessionUsage = { used: 0, limit: 1 } }) { const [role, setRole] = React.useState(jobContext?.role || ""); const [company, setCompany] = React.useState(jobContext?.company || ""); const ghConnected = !!(jobContext?.githubName); const [voice, setVoice] = React.useState(localStorage.getItem("gr.voice") || "female"); const [saved, setSaved] = React.useState(false); function save() { const ctx = { ...jobContext, role, company, }; onJobChange(ctx); localStorage.setItem("gr.voice", voice); setSaved(true); setTimeout(() => setSaved(false), 2000); } const Section = ({ title, children }) => (
{title}
{children}
); return (

Settings

Manage your profile, interview setup, and connections
{/* Profile */}
{user.picture ? : }
{user.name}
{user.email}
Google connected
{/* Interview setup */}
setRole(e.target.value)} /> setCompany(e.target.value)} />
{/* Voice preference */}
{[ { id: "female", label: "Female", desc: "HFC · Natural", icon: "user-round" }, { id: "male", label: "Male", desc: "Lessac · Clear", icon: "user" }, ].map(v => ( ))}
{/* Connections */}
{/* GitHub */}
GitHub
Ari references your repos during technical questions
{ghConnected && Connected}
{ghConnected ? (
{ e.currentTarget.src = "../../assets/logo.svg"; }} />
{jobContext.githubName}
@{jobContext.github} · {jobContext.githubRepos} repos
{jobContext.githubBio &&
{jobContext.githubBio}
}
{jobContext.githubCompany && 🏢 {jobContext.githubCompany}} {jobContext.githubLocation && 📍 {jobContext.githubLocation}}
{jobContext.githubLanguages?.length > 0 && (
{jobContext.githubLanguages.map(l => ( {l} ))}
)} {jobContext.githubTopRepos?.length > 0 && ( )}
) : ( Connect GitHub )} {/* LinkedIn */}
LinkedIn
Your background and experience for personalised questions
{jobContext?.linkedinName && Connected}
{jobContext?.linkedinName ? (
{jobContext.linkedinPicture ? :
in
}
{jobContext.linkedinName}
{jobContext.linkedinEmail}
) : ( Connect LinkedIn )}
{/* Plan usage — pro only */} {subscriptionPlan !== "free" && (() => { const remaining = sessionUsage.limit - sessionUsage.used; const pct = Math.min((sessionUsage.used / sessionUsage.limit) * 100, 100); const color = remaining <= 5 ? "#dc2626" : remaining <= 10 ? "#d97706" : "var(--gr-green-500)"; return (
{remaining} of {sessionUsage.limit} sessions left this month
{sessionUsage.used} session{sessionUsage.used !== 1 ? "s" : ""} used · resets on your next billing date
{subscriptionPlan}
); })()}
); } window.Settings = Settings;