Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-07 22:25:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(auth): Transition main app to custom authentication system and local useAuth hook

Browse Source
This commit is contained in:
ghost2023
2026-05-28 11:41:23 +03:00
parent 53e8b40123
commit b30a04edce
6 changed files with 696 additions and 1339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
apps/edr-freight-web/portal/src/components/auth/AuthLayout.tsx Normal file
View File

@@ -0,0 +1,86 @@
import type { ReactNode } from "react";
import { ShieldCheck, Train } from "lucide-react";
export interface AuthLayoutProps {
children: ReactNode;
left: {
badge: string;
title: string;
description: string;
features: string[];
stats: {
label: string;
value: string;
footer: string;
progress: string;
};
};
}
export default function AuthLayout({ children, left }: AuthLayoutProps) {
return (
<div className="min-h-screen bg-background text-foreground">
<div className="grid min-h-screen lg:grid-cols-2">
<div className="relative hidden overflow-hidden bg-primary p-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
<div className="relative z-10">
<div className="flex items-center gap-3">
<div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
<Train className="size-7" />
</div>
<div>
<h1 className="text-3xl font-black tracking-tight">EDR Freight</h1>
<p className="mt-1 text-sm opacity-80">Railway Logistics Platform</p>
</div>
</div>
<div className="mt-20 max-w-lg">
<div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
{left.badge}
</div>
<h2 className="mt-6 text-5xl font-black leading-tight tracking-tight">{left.title}</h2>
<p className="mt-6 text-lg leading-8 opacity-85">{left.description}</p>
</div>
<div className="mt-14 grid gap-5">
{left.features.map((item) => (
<div key={item} className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
<ShieldCheck className="size-5" />
</div>
<span className="font-medium">{item}</span>
</div>
))}
</div>
</div>
<div className="relative z-10 rounded-[32px] border border-white/10 bg-white/10 p-6 backdrop-blur-xl">
<div className="flex items-center justify-between">
<div>
<p className="text-sm opacity-80">{left.stats.label}</p>
<h3 className="mt-2 text-4xl font-black">{left.stats.value}</h3>
</div>
<div className="rounded-2xl bg-white/10 px-4 py-2 text-sm font-semibold">{left.stats.footer}</div>
</div>
<div className="mt-6 h-3 overflow-hidden rounded-full bg-white/10">
<div className={`h-full rounded-full bg-white ${left.stats.progress}`} />
</div>
</div>
</div>
<div className="flex items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xl">
<div className="mb-8 flex items-center gap-3 lg:hidden">
<div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
<Train className="size-6" />
</div>
<div>
<h1 className="text-2xl font-bold">EDR Freight</h1>
<p className="text-sm text-muted-foreground">Railway Logistics Platform</p>
</div>
</div>
<div className="rounded-[36px] border border-border bg-card p-8 shadow-2xl md:p-10">
{children}
</div>
</div>
</div>
</div>
</div>
);
}