Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 77x 77x | import { Link } from "react-router";
import { Alert, Button } from "@/components";
type Props = {
email: string;
address: {
street: string;
state: string;
city: string;
zip: number;
};
showNavLinks?: boolean;
};
export const Footer = ({ email, address, showNavLinks = false }: Props) => {
return (
<footer>
{showNavLinks && (
<section className="bg-[#f0f0f0] text-sm">
<div className="grid grid-cols-12 gap-4 px-10 py-4 max-w-screen-xl mx-auto">
<div className="col-span-6 flex gap-8">
<a href="/" className="underline font-bold">
<p>Home</p>
</a>
<a href="/dashboard" className="underline font-bold">
<p>Dashboard</p>
</a>
<a href="/faq" className="underline font-bold">
<p>Support</p>
</a>
</div>
<div className="col-span-6 flex gap-8 justify-end">
<p>Help Desk:</p>
<p>
<a href="tel:(833) 228-2540" className="underline">
(833) 228-2540
</a>
</p>
<p>
<a href="mailto:OneMAC_Helpdesk@cms.hhs.gov" className="underline">
OneMAC_Helpdesk@cms.hhs.gov
</a>
</p>
</div>
</div>
</section>
)}
<section className="bg-sky-100">
<div className="grid grid-cols-12 gap-4 px-10 py-4 max-w-screen-xl mx-auto">
<img
src="/MedicaidLogo.svg"
alt="Logo for Medicaid"
className="w-36 col-span-6 sm:col-span-6 justify-self-start self-center sm:justify-self-start sm:self-center"
/>
<img
className="max-w-36 col-span-6 sm:col-span-2 justify-self-end self-center"
src="/DepartmentOfHealthLogo.svg"
alt="Logo for Department of Health and Human Services"
/>
<p className="col-span-12 sm:col-span-4">
A federal government website managed and paid for by the U.S. Centers for Medicare and
Medicaid Services and part of the MACPro suite.
</p>
</div>
</section>
<div className="w-full bg-primary">
<div className="px-10 py-4 text-white text-[.8rem] flex flex-col items-center sm:flex-row max-w-screen-xl mx-auto">
<div>
Email{" "}
<a href={`mailto:${email}`} className="font-bold underline">
{email}
</a>{" "}
for help or feedback
</div>
<div className="flex-1"></div>
<div>
<span className="sm:block">{address.street} </span>
<span className="sm:block">
{address.city}, {address.state} {address.zip}
</span>
</div>
</div>
</div>
</footer>
);
};
export const FAQFooter = () => {
return (
<Alert
variant={"infoBlock"}
className="mb-8 items-center flex py-8 px-14 flex-row text-sm justify-center gap-24"
>
<p className="text-lg">Do you have questions or need support?</p>
<Link to="/faq" target="_blank">
<Button className="mx-4" size="lg">
View FAQs
</Button>
</Link>
</Alert>
);
};
|