69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Script from "next/script";
|
|
import Image from "next/image";
|
|
import { Modal, ModalContent, ModalTrigger, ModalTitle } from "poyraz-ui/molecules";
|
|
import { Skeleton } from "poyraz-ui/atoms";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import type { ThemeMode } from "@/components/app-shell";
|
|
|
|
type AtaturkWidgetModalProps = {
|
|
theme: ThemeMode;
|
|
};
|
|
|
|
export function AtaturkWidgetModal({ theme }: AtaturkWidgetModalProps) {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const t = useTranslations("AtaturkWidget");
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<Modal>
|
|
<ModalTrigger asChild>
|
|
<button
|
|
type="button"
|
|
title={t("title")}
|
|
className="fixed bottom-4 left-4 z-50 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border-2 border-red-600 bg-background shadow-lg transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
aria-label={t("title")}
|
|
>
|
|
<div className="relative h-full w-full">
|
|
<Image
|
|
src="/ataturk.webp"
|
|
alt={t("alt")}
|
|
fill
|
|
sizes="56px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</ModalTrigger>
|
|
|
|
<ModalContent className="flex flex-col justify-center p-6 sm:max-w-[425px] min-h-[160px] transition-all duration-300">
|
|
<ModalTitle className="sr-only">{t("title")}</ModalTitle>
|
|
|
|
{isLoading && (
|
|
<div className="flex w-full flex-col space-y-3">
|
|
<Skeleton className="h-4 w-3/4 rounded-sm" />
|
|
<Skeleton className="h-4 w-full rounded-sm" />
|
|
<Skeleton className="h-4 w-5/6 rounded-sm" />
|
|
<div className="pt-2">
|
|
<Skeleton className="h-3 w-1/4 rounded-sm" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className={`w-full ${isLoading ? "hidden" : "block"}`}>
|
|
<div data-ataturk-quote-widget data-language={locale} data-theme={theme}></div>
|
|
<Script
|
|
src="https://ataturk-kronolojisi.org/widget/quote.js"
|
|
strategy="lazyOnload"
|
|
data-language={locale}
|
|
data-theme={theme}
|
|
onReady={() => setIsLoading(false)}
|
|
/>
|
|
</div>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
}
|