Magic link email

import * as React from "react";
import { Btn, Code, Eyebrow, H1, P, Shell, Small, nameOf, type TemplateProps } from "../components";

export type MagicLinkProps = TemplateProps & {
  signInUrl?: string;
  code?: string;
  expiresInMinutes?: number;
};

export default function MagicLink({
  style,
  brand,
  signInUrl = "https://fieldnote.app/auth/magic?token=e77c02f1",
  code = "WXK-482",
  expiresInMinutes = 15,
}: MagicLinkProps) {
  return (
    <Shell style={style} brand={brand} label="Sign in" preview={`Your sign-in link (expires in ${expiresInMinutes} minutes). Code: ${code}`}>
      <Eyebrow>Sign in</Eyebrow>
      <H1>Your sign-in link is here.</H1>
      <P>Click the button to sign in. No password needed.</P>
      <Btn href={signInUrl}>Sign in to {nameOf(brand)}</Btn>