iNocturnis/NullTranslationWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added kofi support me

Browse Source
This commit is contained in:
Hieuhuy Pham 2025-01-15 20:51:08 -05:00
parent 3fb1c6434a
commit 56f871f603
3 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
global.d.ts vendored
View File

@ -4,3 +4,9 @@ declare namespace NodeJS {
STRAPI_API_TOKEN: string; STRAPI_API_TOKEN: string;
} }
} }
declare global {
interface Window {
kofiWidgetOverlay: any;
}
}
export {};

3
src/app/layout.tsx
View File

@ -5,6 +5,7 @@ import "tailwindcss/tailwind.css";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import NightModeToggle from "@/components/NightModeToggle"; import NightModeToggle from "@/components/NightModeToggle";
import Navbar from "@/components/NavigationBar"; import Navbar from "@/components/NavigationBar";
import KofiWidget from "@/components/KofiWidget";
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
const [isDarkMode, setIsDarkMode] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false);
@ -49,8 +50,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
`, `,
}} }}
/> />
</head> </head>
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen"> <body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<KofiWidget />
<Navbar /> <Navbar />
<main className="relative">{children}</main> <main className="relative">{children}</main>
<div className="fixed bottom-4 right-4"> <div className="fixed bottom-4 right-4">

31
src/components/KofiWidget.tsx Normal file
View File

@ -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;