Revelav3/src/pages/Faq.tsx
2024-03-08 11:46:47 -06:00

51 lines
1.4 KiB
TypeScript

import { useTranslation } from "react-i18next";
import { HeaderRoute } from "../components/HeaderRoute";
import CloakedHead from "../util/CloakedHead";
import { useEffect } from "preact/hooks";
import "./Faq.css";
export function Faq() {
const { t } = useTranslation();
const faqData = t("faq", { returnObjects: true });
useEffect(() => {
const hash = window.location.hash.substring(1);
if (hash) {
const highlightedDiv = document.getElementById(hash);
if (highlightedDiv) {
highlightedDiv.classList.add("highlighted");
}
}
}, []);
return (
<HeaderRoute>
<CloakedHead
originalTitle={t("titles.discord")}
originalFavicon="/logo.png"
/>
<div class="p-10 text-input-text">
{Object.values(faqData).map((item, index) => (
<div key={index} className="py-3">
<p className="text-4xl" id={(index + 1).toString()}>
{item.q}
</p>
<div class="flex flex-row">
<p className="text-lg">
{item.a}{" "}
{item.h && (
<a href={item.hR} class="underline">
{item.h}
</a>
)}
</p>
</div>
</div>
))}
</div>
</HeaderRoute>
);
}