43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { Link, Sheet, Typography } from "@mui/joy";
|
|
import { useTranslation } from "react-i18next";
|
|
import qrCode from "../assets/Portfolio-QR-Code.png";
|
|
|
|
export const PageFooter = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<footer className="w-full mt-auto px-3 pb-3">
|
|
<Sheet
|
|
variant="soft"
|
|
className="mx-auto w-full max-w-3xl rounded-2xl border border-slate-200/70 bg-white/80 backdrop-blur"
|
|
>
|
|
<div className="flex flex-col gap-2 p-2.5 sm:p-3">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<Typography
|
|
level="title-sm"
|
|
className="text-slate-800 tracking-wide sm:pr-4"
|
|
>
|
|
{t("footer-headline")}
|
|
<Link
|
|
href="https://portfolio-theis.de/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="ml-2 inline-flex items-center text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-900"
|
|
>
|
|
portfolio-theis.de
|
|
</Link>
|
|
</Typography>
|
|
<div className="flex items-center justify-center sm:justify-end sm:flex-none">
|
|
<img
|
|
src={qrCode}
|
|
alt="https://portfolio-theis.de/"
|
|
className="h-20 w-20 shrink-0 rounded-md border border-slate-200 object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Sheet>
|
|
</footer>
|
|
);
|
|
};
|