RH-Lieferscheine/components/HelpButton.js

// components/HelpButton.js
"use client";

import { IoHelpCircle } from "react-icons/io5";
import {
	Button,
	Modal,
	ModalContent,
	ModalHeader,
	ModalBody,
	ModalFooter,
	useDisclosure,
} from "@nextui-org/react";

export default function HelpButton() {
	const { isOpen, onOpen, onOpenChange } = useDisclosure();

	return (
		<>
			<Button onPress={onOpen} color="error">
				<IoHelpCircle className="text-blue-500 text-3xl cursor-help" />
			</Button>
			<Modal
				backdrop="transparent"
				isOpen={isOpen}
				onOpenChange={onOpenChange}
				radius="lg"
				classNames={{
					body: "py-6",
					backdrop: "bg-[#292f46]/50 backdrop-opacity-40",
					base: "border-[#292f46] bg-[#19172c] dark:bg-[#19172c] text-[#a8b0d3]",
					header: "border-b-[1px] border-[#292f46]",
					footer: "border-t-[1px] border-[#292f46]",
					closeButton: "hover:bg-white/5 active:bg-white/10",
				}}
			>
				<ModalContent>
					{(onClose) => (
						<>
							<ModalHeader className="flex flex-col gap-1">
								Fragen zur Applikation?
							</ModalHeader>
							<ModalBody>
								<p>
									Das ist die erste Version von dieser Applikation. Wir arbeiten
									stets weiter daran, die Performance zu verbessern.
								</p>
								<p>
									Falls es zu{" "}
									<span className="text-orange-500">langen Ladezeiten</span>{" "}
									kommt, dann versucht bitte euch auszuloggen, die Seite
									neuzuladen und wieder einzuloggen. In den meisten Fällen hilft
									es die Performance wieder zu steigern.
								</p>
								<p>
									Wenn der Login oder es zu dauerhaften Problemen kommt, dann
									wendet euch bitte an{" "}
									<a href="mailto:cayan@attus.de">
										<span className="text-blue-400">Cayan Aydin</span>
									</a>
									. Ich versuche das Problem schnellstmöglich zu beheben.
								</p>
								<p>
									Falls es{" "}
									<span className="text-orange-500">
										Probleme mit Lieferscheinen
									</span>{" "}
									gibt, die nicht angezeigt werden oder ähnliches, dann wendet
									euch bitte an den{" "}
									<a href="mailto:support@attus.de">
										<span className="text-blue-400">Support</span>
									</a>
									.
								</p>
								<p>
									Vielen Dank für euer Verständnis. Bei neuen Features werdet
									ihr Benachrichtigt.
								</p>
							</ModalBody>
							<ModalFooter>
								<Button
									className="text-white"
									onPress={onClose}
									size="sm"
									variant="flat"
								>
									Schließen
								</Button>
							</ModalFooter>
						</>
					)}
				</ModalContent>
			</Modal>
		</>
	);
}