Feedback

Sign-in gate

Explains what signing in unlocks, and offers Sign in with GitHub.

import { SignInGate } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Job tracking

Track your job applications

Daily matches from Hacker News hiring posts
Notes and status for every application
Cover letters from your resume

sign-in-gate/jobs.tsx

import { SignInGate } from '@jsonresume/ui';

export default function SignInGateJobs() {
  return (
    <SignInGate
      title="Track your job applications"
      description="Sign in to save jobs, mark progress and get matches from your resume."
      features={[
        'Daily matches from Hacker News hiring posts',
        'Notes and status for every application',
        'Cover letters from your resume',
      ]}
      signInHref="#login"
    />
  );
}

Accessibility

The sign-in control is a real link (signInHref) or button (onSignIn).

Props

Also accepts the attributes of the element SignInGate renders.
Prop	Type	Default	Description
title required	ReactNode	–	What signing in unlocks, as a heading: "Track your applications".
description	ReactNode	–
features	ReactNode[]	[]	Short list of what the reader gets.
level	123	2
onSignIn	(() => void)	–	…or a handler (e.g. signIn('github')).
signInHref	string	–	Link to the sign-in route…
signInLabel	string	Sign in with GitHub