84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import styles from "./AuthShell.module.css";
|
|
|
|
const websiteUrl =
|
|
process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
|
|
"http://localhost:3000";
|
|
|
|
export default function AuthShell({
|
|
titleLine1,
|
|
titleLine2,
|
|
children,
|
|
footerNote,
|
|
}: {
|
|
titleLine1: string;
|
|
titleLine2: string;
|
|
children: ReactNode;
|
|
footerNote?: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className={styles.page}>
|
|
<div className={styles.card}>
|
|
<div className={styles.visual}>
|
|
<img className={styles.ship} src="/images/auth/ship.png" alt="" />
|
|
</div>
|
|
|
|
<div className={styles.content}>
|
|
<div className={styles.contentInner}>
|
|
<div className={styles.brand}>
|
|
<img src="/images/icons/logo.png" alt="" width={69} height={69} />
|
|
<div className={styles.brandText}>
|
|
<span>{titleLine1}</span>
|
|
<strong>{titleLine2}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
{children}
|
|
|
|
{footerNote ? <div className={styles.note}>{footerNote}</div> : null}
|
|
|
|
<hr className={styles.rule} />
|
|
|
|
<nav className={styles.links} aria-label="Auth footer">
|
|
<a href={`${websiteUrl}/businesses`}>Categories</a>
|
|
<span>|</span>
|
|
<a href={`${websiteUrl}/#vision`}>Vision</a>
|
|
<span>|</span>
|
|
<a href={`${websiteUrl}/about`}>About us</a>
|
|
<span>|</span>
|
|
<a href={`${websiteUrl}/contact`}>Contact us</a>
|
|
</nav>
|
|
|
|
<div className={styles.socials}>
|
|
<a href="https://instagram.com" aria-label="Instagram">
|
|
<img
|
|
src="/images/icons/instagram.png"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</a>
|
|
<a href="https://telegram.org" aria-label="Telegram">
|
|
<img
|
|
src="/images/icons/telegram.png"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</a>
|
|
<a href="https://facebook.com" aria-label="Facebook">
|
|
<img
|
|
src="/images/icons/facebook.png"
|
|
alt=""
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|