feat: add sponsor button

Author: S-N-O-R-L-A-X

src/components/Header/Header.tsx

@@ -1,12 +1,24 @@
+import { MoneyButton } from "artistic-components";
 import Octocat from "./Octocat";
+import { FlexBox } from "@ui5/webcomponents-react";
+import SponsorDialog from "../SponsorDialog/SponsorDialog";
+import { useState } from "react";
 
 export default function Header() {
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const clickHandler = () => {
+    setIsDialogOpen(true);
+  }
   return (
-    <div>
+    <>
       <p className="marquee">
         Welcome to my site. I'm SNORLAX.
       </p>
-      <Octocat />
-    </div>
+      <FlexBox>
+        <MoneyButton style={{ "margin": "1rem" }} onClick={clickHandler}> Sponsor me </MoneyButton>
+        <Octocat />
+      </FlexBox>
+      <SponsorDialog open={isDialogOpen} closeHandler={() => { setIsDialogOpen(false) }} />
+    </>
   )
 }

src/components/SponsorDialog/SponsorDialog.tsx

@@ -0,0 +1,17 @@
+import { Bar, Button, Dialog, DialogPropTypes } from "@ui5/webcomponents-react";
+import { MouseEventHandler } from "react";
+import { createPortal } from "react-dom";
+
+interface SponsorDialogProps extends DialogPropTypes {
+	closeHandler: MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function SponsorDialog(props: SponsorDialogProps) {
+	const { open, closeHandler, ...rest } = props;
+	return (
+		createPortal(
+			<Dialog open={open} {...rest} footer={<Bar design="Footer" endContent={<button onClick={closeHandler}>Close</button>} />}></Dialog>,
+			document.body
+		)
+	)
+}

src/views/Layout/Layout.tsx

@@ -1,7 +1,6 @@
 import "./index.css"
 import Sidebar from "../../components/Sidebar/Sidebar";
 import Header from "../../components/Header/Header";
-import Home from "../Home/Home";
 import { Outlet } from "react-router-dom";
 
 export default function Layout() {