131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
"use client"; // Wichtig, um sicherzustellen, dass der Code nur auf dem Client ausgeführt wird
|
|
import React, { useEffect, useState, useRef } from "react";
|
|
import { Icon } from "@iconify/react";
|
|
|
|
function Footer() {
|
|
const [showSlider, setShowSlider] = useState(false);
|
|
const sliderRef = useRef<HTMLDivElement>(null);
|
|
|
|
const pdfFiles = [
|
|
// "ACCESS.PDF",
|
|
// "CPL.PDF",
|
|
//"CPL220.PDF",
|
|
//"CPL3.PDF",
|
|
//"Daten_APL.pdf",
|
|
//"Daten_CDO.pdf",
|
|
//"Daten_DPL.pdf",
|
|
//"KUE605.PDF",
|
|
//"KUE605uC.PDF",
|
|
//"KUE605uF.PDF",
|
|
"KUE705FO.PDF",
|
|
//"Modem.pdf",
|
|
//"PST212.PDF",
|
|
//"Temper.pdf",
|
|
//"Wasser.pdf",
|
|
//"XIOPM.PDF",
|
|
];
|
|
|
|
// Funktion zum Laden der PDFs direkt aus dem öffentlichen Verzeichnis
|
|
const loadPDF = (fileName: string) => {
|
|
const pdfUrl = `/doku/${fileName}`; // Annahme: Die PDFs liegen im Ordner "public/doku"
|
|
window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab
|
|
setShowSlider(false);
|
|
};
|
|
|
|
// Schließt den Slider, wenn außerhalb geklickt wird
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (
|
|
sliderRef.current &&
|
|
!sliderRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowSlider(false);
|
|
}
|
|
}
|
|
|
|
if (showSlider) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
} else {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [showSlider]);
|
|
|
|
return (
|
|
<footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
|
|
<div className="container mx-auto flex justify-between">
|
|
<div className="flex flex-row space-x-2 items-center">
|
|
<Icon
|
|
icon="material-symbols:factory-outline"
|
|
className="text-xl text-accent"
|
|
/>
|
|
<p className="text-sm text-fg-muted">
|
|
Littwin Systemtechnik GmbH & Co. KG
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-row space-x-2 items-center">
|
|
<Icon icon="charm:phone" className="text-xl text-accent" />
|
|
<p className="text-sm text-fg-muted">Telefon: 04402 972577-0</p>
|
|
</div>
|
|
<div className="flex flex-row space-x-2 items-center">
|
|
<Icon icon="mdi:email-outline" className="text-xl text-accent" />
|
|
<p className="text-sm text-fg-muted">
|
|
kontakt@littwin-systemtechnik.de
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="flex flex-row space-x-2 cursor-pointer items-center group"
|
|
onClick={() => setShowSlider(true)}
|
|
>
|
|
<Icon
|
|
icon="bi:book"
|
|
className="text-xl text-accent group-hover:brightness-110 transition"
|
|
/>
|
|
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">
|
|
Handbücher
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
ref={sliderRef}
|
|
className={`fixed top-0 right-0 w-64 h-full bg-[var(--color-surface)] border-l border-base shadow-lg transform transition-transform duration-300 ${
|
|
showSlider ? "translate-x-0" : "translate-x-full"
|
|
}`}
|
|
>
|
|
<div className="p-4 flex justify-between items-center border-b border-base">
|
|
<h3 className="text-base font-semibold text-[var(--color-fg)]">
|
|
PDF Handbücher
|
|
</h3>
|
|
<button
|
|
className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition"
|
|
onClick={() => setShowSlider(false)}
|
|
aria-label="Schließen"
|
|
>
|
|
<Icon icon="carbon:close" className="text-xl" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<ul>
|
|
{pdfFiles.map((fileName) => (
|
|
<li
|
|
key={fileName}
|
|
className="cursor-pointer text-accent hover:underline mb-2 text-sm"
|
|
onClick={() => loadPDF(fileName)}
|
|
>
|
|
{fileName}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export default Footer;
|