57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { Icon } from "../../components/ui/Icon";
|
|
|
|
interface LoginBrandProps {
|
|
oauthChecking: boolean;
|
|
oauthReady: boolean;
|
|
}
|
|
|
|
function VignetteMark() {
|
|
return (
|
|
<span className="lg-mark" aria-hidden="true">
|
|
<svg viewBox="0 0 26 26" width={26} height={26} fill="none">
|
|
<circle cx="13" cy="13" r="11" stroke="currentColor" strokeWidth="2" />
|
|
<path
|
|
d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
<circle cx="13" cy="9" r="1.6" fill="var(--clay)" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function LoginBrand({ oauthChecking, oauthReady }: LoginBrandProps) {
|
|
return (
|
|
<section className="lg-brand" aria-label="Vignette">
|
|
<div className="lg-wordmark">
|
|
<VignetteMark />
|
|
<span>Vignette</span>
|
|
</div>
|
|
|
|
<div className="lg-copy">
|
|
<span className="lg-kicker">
|
|
<span className="d" aria-hidden="true" />
|
|
상담 시뮬레이션 학습
|
|
</span>
|
|
<h1>
|
|
<span className="lg-highlight">상담을 연습하고,</span>
|
|
<br />
|
|
함께 돌아봅니다.
|
|
</h1>
|
|
<p>
|
|
가상 내담자와 상담을 연습하고, 회기 기록과 피드백으로 다음 연습을 준비하세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="lg-policy">
|
|
<span>
|
|
<Icon name="shield" size={17} />
|
|
Google 로그인
|
|
</span>
|
|
<b>{oauthChecking ? "확인 중" : oauthReady ? "모든 Google 계정" : "설정 필요"}</b>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|