sarlink-portal/components/client-error-message.tsx

import { Phone, TriangleAlert } from "lucide-react";
import Link from "next/link";
import { Button } from "./ui/button";

export default function ClientErrorMessage({ message }: { message: string }) {
	return (
		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
				<TriangleAlert color="red" />
				<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
				<span className="text-muted-foreground">
					Please contact the administrator to give you permissions.
				</span>
				<Link href="tel:9198026">
					<Button>
						<Phone /> 919-8026
					</Button>
				</Link>
			</div>
		</div>
	);
}