File size: 5,370 Bytes
65d68f5 | 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | "use client";
import "./AuthPageShell.css";
import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";
type AuthPageShellProps = {
children: ReactNode;
};
export const authInputClass =
"h-[52px] w-full rounded-[10px] border border-[#cecec8] bg-white px-4 text-[16px] text-[#17181b] outline-none transition-[border-color,box-shadow,background-color] duration-150 placeholder:text-[#8a8b84] hover:border-[#a9aaa3] focus:border-[#17181b] focus:shadow-[0_0_0_3px_rgba(23,24,27,0.1)] disabled:cursor-not-allowed disabled:bg-[#f0f0ed] disabled:text-[#5c6170] sm:text-[15px]";
export const authPrimaryButtonClass =
"inline-flex h-[52px] w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] bg-[#17181b] px-5 text-[14px] font-semibold text-white transition-colors duration-150 hover:bg-[#303136] active:bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2 focus-visible:ring-offset-[#fcfcfa] disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-[#17181b]";
export const authSecondaryButtonClass =
"inline-flex h-[52px] w-full cursor-pointer items-center justify-center gap-2.5 rounded-[10px] border border-[#cecec8] bg-white px-5 text-[13px] font-semibold text-[#17181b] transition-[border-color,background-color] duration-150 hover:border-[#9b9c95] hover:bg-[#f5f4f0] active:bg-[#ecebe7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45";
export const authErrorClass =
"rounded-xl border border-[#d7a4a0] bg-[#fff6f5] px-3 py-2.5 text-[12px] font-medium leading-5 text-[#8a2f2a]";
export const authStatusClass =
"rounded-xl border border-[#b7cdbd] bg-[#f3f8f4] px-3 py-2.5 text-[12px] font-medium leading-5 text-[#2f6240]";
export const authIconWellClass =
"grid size-11 place-items-center rounded-xl border border-[#e5e5e1] bg-[#f0f0ed] text-[#17181b]";
export function AuthPageShell({
children,
}: AuthPageShellProps) {
return (
<main className="docdoe-auth min-h-svh overflow-x-clip bg-[#fcfcfa] px-5 text-[#17181b] sm:px-8">
<div className="mx-auto flex min-h-svh w-full max-w-[1040px] flex-col">
<header className="flex min-h-[76px] items-center justify-between border-b border-[#e5e5e1] py-4">
<BrandLink />
<p className="hidden text-[11px] font-medium tracking-[0.01em] text-[#6f706a] sm:block">
Classes · practice · revision
</p>
</header>
<div className="flex flex-1 items-center py-10 sm:py-14">
<section className="auth-card mx-auto w-full max-w-[440px] bg-transparent text-[#17181b]">
{children}
</section>
</div>
<footer className="flex min-h-[58px] items-center justify-center border-t border-[#e5e5e1] py-4 text-center text-[11px] leading-5 text-[#777873] sm:justify-between sm:text-left">
<span>Structured study, chapter by chapter.</span>
<span className="hidden sm:inline">Made for focused school evenings.</span>
</footer>
</div>
</main>
);
}
function BrandLink() {
return (
<Link
href="/"
className="inline-flex w-fit items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-4 focus-visible:ring-offset-[#fcfcfa]"
>
<Image
src="/docdoe-icon.svg"
alt=""
width={36}
height={36}
className="size-9 rounded-[10px]"
priority
unoptimized
/>
<span>
<span
className="block font-[family-name:var(--df-display)] text-[17px] font-extrabold tracking-[-0.04em] text-[#17181b] sm:text-[18px]"
>
DocDoe
</span>
<span className="block text-[10px] font-medium text-[#6f706a]">
Your study desk
</span>
</span>
</Link>
);
}
export function AuthDivider() {
return (
<div className="relative my-2 flex items-center justify-center" aria-hidden="true">
<div className="h-px w-full bg-[#e5e5e1]" />
<span className="absolute bg-[#fcfcfa] px-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-[#777873]">
or
</span>
</div>
);
}
export function AuthGoogleButton({
disabled = false,
onClick,
}: {
disabled?: boolean;
onClick: () => void;
}) {
return (
<button type="button" onClick={onClick} disabled={disabled} className={authSecondaryButtonClass}>
<svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" />
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
</svg>
Continue with Google
</button>
);
}
|