diff --git a/global.d.ts b/global.d.ts
index bc5bc95..39ab749 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -3,4 +3,10 @@ declare namespace NodeJS {
NEXT_PUBLIC_API_URL: string;
STRAPI_API_TOKEN: string;
}
- }
\ No newline at end of file
+ }
+ declare global {
+ interface Window {
+ kofiWidgetOverlay: any;
+ }
+ }
+export {};
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index be2e473..894f8ce 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import "tailwindcss/tailwind.css";
import React, { useEffect, useState } from "react";
import NightModeToggle from "@/components/NightModeToggle";
import Navbar from "@/components/NavigationBar";
+import KofiWidget from "@/components/KofiWidget";
export default function RootLayout({ children }: { children: React.ReactNode }) {
const [isDarkMode, setIsDarkMode] = useState(false);
@@ -49,8 +50,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
`,
}}
/>
+
+
{children}
diff --git a/src/components/KofiWidget.tsx b/src/components/KofiWidget.tsx
new file mode 100644
index 0000000..c4db5cd
--- /dev/null
+++ b/src/components/KofiWidget.tsx
@@ -0,0 +1,31 @@
+"use client"
+import { useEffect } from 'react';
+
+const KofiWidget = () => {
+ useEffect(() => {
+ // Dynamically create and append the script
+ const script = document.createElement('script');
+ script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
+ script.async = true;
+ script.onload = () => {
+ if (typeof window !== 'undefined' && window.kofiWidgetOverlay) {
+ window.kofiWidgetOverlay.draw('nulltranslationgroup', {
+ 'type': 'floating-chat',
+ 'floating-chat.donateButton.text': 'Support me',
+ 'floating-chat.donateButton.background-color': '#00b9fe',
+ 'floating-chat.donateButton.text-color': '#fff',
+ });
+ }
+ };
+ document.body.appendChild(script);
+
+ return () => {
+ // Clean up the script when the component unmounts
+ document.body.removeChild(script);
+ };
+ }, []);
+
+ return null; // No visible JSX; the widget is a floating overlay
+};
+
+export default KofiWidget;
\ No newline at end of file