86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { tabContentVariant, settingsPageVariant } from "./Variants";
|
|
import CloakPreset from "./CloakPreset";
|
|
import { useTranslation } from "react-i18next";
|
|
import { LoadSuspense } from "../../LoadSuspense";
|
|
|
|
const TabSettings = ({ id, active }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<motion.div
|
|
role="tabpanel"
|
|
id={id}
|
|
className="tab-content"
|
|
variants={tabContentVariant}
|
|
animate={active ? "active" : "inactive"}
|
|
initial="inactive"
|
|
>
|
|
<motion.div
|
|
variants={settingsPageVariant}
|
|
className="content-card flex w-full flex-col items-center justify-center text-center"
|
|
>
|
|
<div class="text-3xl font-bold text-input-text">
|
|
{t("settings.cloaking.title")}
|
|
</div>
|
|
<div class="text-md pb-5 font-bold text-input-text">
|
|
{t("settings.cloaking.subtitle")}
|
|
</div>
|
|
<div class="flex flex-row space-x-4">
|
|
<CloakPreset faviconUrl="none" title="none" />
|
|
<CloakPreset
|
|
faviconUrl="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=32"
|
|
title="Google"
|
|
/>
|
|
<CloakPreset
|
|
faviconUrl="https://www.wikipedia.org/static/favicon/wikipedia.ico"
|
|
title="Wikipedia"
|
|
/>
|
|
<CloakPreset
|
|
faviconUrl="https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico"
|
|
title="Dashboard"
|
|
/>
|
|
<CloakPreset
|
|
faviconUrl="https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"
|
|
title="Home"
|
|
/>
|
|
<CloakPreset
|
|
faviconUrl="https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"
|
|
title="Schoology"
|
|
/>
|
|
</div>
|
|
<div class="relative p-4">
|
|
<button
|
|
class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none"
|
|
onClick={() => {
|
|
let newWindow = window.open("about:blank");
|
|
let iframe = document.createElement("iframe");
|
|
iframe.src = window.location.origin;
|
|
iframe.style.width = "100%";
|
|
iframe.style.height = "100%";
|
|
iframe.style.border = "none";
|
|
iframe.style.overflow = "hidden";
|
|
iframe.style.margin = "0";
|
|
iframe.style.padding = "0";
|
|
iframe.style.position = "fixed";
|
|
iframe.style.top = "0";
|
|
iframe.style.bottom = "0";
|
|
iframe.style.left = "0";
|
|
iframe.style.right = "0";
|
|
newWindow.document.body.appendChild(iframe);
|
|
window.location.replace("https://google.com");
|
|
return (
|
|
<div>
|
|
<LoadSuspense />
|
|
</div>
|
|
);
|
|
}}
|
|
>
|
|
{t("settings.cloaking.aboutblank")}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
export default TabSettings;
|