Hardik
7ae1189042
Users on mobile who see the "Desktop Required" wall had no way to log out. Added a Sign out button using next-auth signOut (requires "use client"). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Monitor, LogOut } from "lucide-react";
|
|
import { signOut } from "next-auth/react";
|
|
|
|
export function DesktopRequired() {
|
|
return (
|
|
<div className="md:hidden fixed inset-0 z-40 flex flex-col items-center justify-center bg-white px-8 text-center">
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-50 mb-5">
|
|
<Monitor className="h-8 w-8 text-primary-600" />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-neutral-900 mb-2">Desktop Required</h2>
|
|
<p className="text-sm text-neutral-500 max-w-xs leading-relaxed">
|
|
PPMS is designed for use on a desktop or laptop browser. Please switch to a larger screen to
|
|
access all features.
|
|
</p>
|
|
<p className="mt-4 text-xs text-neutral-400 italic">
|
|
PMS — it runs the ship, from the right seat.
|
|
</p>
|
|
<button
|
|
onClick={() => signOut({ callbackUrl: "/login" })}
|
|
className="mt-8 flex items-center gap-2 rounded-lg border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-600 hover:bg-neutral-50 transition-colors"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|