68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { UserLock } from "lucide-react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "./components/ui/card";
|
|
import { Button } from "./components/ui/button";
|
|
import { Link } from "react-router";
|
|
|
|
export const SUPPORT_MAIL = "mailto:" + import.meta.env.VITE_SUPPORT_EMAIL;
|
|
|
|
export function AuthLayout({
|
|
children,
|
|
title = "Connexion",
|
|
description = "Entrez votre email pour recevoir un lien de connexion ou un code de vérification.",
|
|
}: {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
description?: string;
|
|
}) {
|
|
return (
|
|
<main className="flex h-full flex-col items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
<Card className="w-full">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl font-bold flex items-center justify-center">
|
|
<UserLock className="h-6 w-6 mr-2" />
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription className="text-center">
|
|
{description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>{children}</CardContent>
|
|
<CardFooter className="flex justify-between text-sm text-muted-foreground">
|
|
<p className="text-xs">Besoin d'aide ?</p>
|
|
<Button variant="link" size="sm" asChild className="h-auto p-0">
|
|
<Link to={SUPPORT_MAIL} className="text-xs">
|
|
Contactez le support
|
|
</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export function MainLayout({
|
|
children,
|
|
header
|
|
}: {
|
|
children: React.ReactNode;
|
|
header: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<main className="container mx-auto py-8 px-4">
|
|
<div className="flex justify-between items-center mb-4">
|
|
{header}
|
|
</div>
|
|
|
|
{children}
|
|
</main>
|
|
);
|
|
}
|