forked from CSI-KJSCE/Travel-policy-
52 lines
2.0 KiB
JavaScript
52 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { useNavigate, useParams, useRouteLoaderData } from "react-router-dom";
|
|
|
|
function ApplicationsStatusDescription() {
|
|
const { role } =
|
|
useRouteLoaderData("Applicant-Root")?.data ||
|
|
useRouteLoaderData("Validator-Root")?.data;
|
|
const navigate = useNavigate();
|
|
const { status } = useParams();
|
|
|
|
return (
|
|
<div className="bg-slate-50 dark:bg-[#3c4043] shadow-md rounded-lg p-6 mb-8 border border-slate-400 dark:border-gray-600 transition-colors duration-200">
|
|
<div className="relative flex flex-col md:flex-row items-center justify-center mb-6 gap-5">
|
|
<h1 className="text-3xl font-semibold text-gray-800 dark:text-google-text text-center">
|
|
{`${status.toUpperCase()} APPLICATIONS`}
|
|
</h1>
|
|
{role === "Applicant" && (
|
|
<button
|
|
type='button'
|
|
onClick={() => navigate("../form")}
|
|
className="md:absolute md:right-0 flex items-center bg-gradient-to-r from-red-600 to-red-800 hover:from-red-800 hover:to-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6 inline-block mr-2"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm">Create New Application</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
<p className="text-gray-600 dark:text-google-text-secondary text-lg leading-relaxed sm:block hidden">
|
|
Easily track the details and statuses of all your submitted applications
|
|
in one place.
|
|
<br />
|
|
Stay updated and manage your applications with ease.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ApplicationsStatusDescription;
|