add support links

src/Components/Misc/SupportMe.tsx

@@ -1,23 +1,65 @@
 import styled from 'styled-components';
-import { theme } from '../../Data/theme';
 import { Paragraph } from './TextComponents';
+import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
+import { theme } from '../../Data/theme';
+import { ButtonBase } from '@mui/material';
 
-const Footer = styled.div`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 58px;
-  background-color: ${theme.palette.primary.main};
+const SupportContainer = styled.div`
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 16px;
+  margin: 16px 0;
+`;
+
+const SupportButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  background-color: ${theme.palette.primary.main};
+  border-radius: 4px;
+  margin: 0 1rem;
+  padding: 0 1rem;
+  transition: background-color 0.2s ease-in-out;
+  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
+  &:hover {
+    background-color: ${theme.palette.primary.dark};
+  }
 `;
 
 export const SupportMe = () => {
+  const handleOpenBuyMeCoffee = () => {
+    window.open('https://www.buymeacoffee.com/vikeo');
+  };
+
+  const handleOpenKoFi = () => {
+    window.open('https://ko-fi.com/vikeo');
+  };
+
   return (
-    <Footer>
-      <Paragraph>Support me</Paragraph>
-    </Footer>
+    <SupportContainer>
+      <SupportButton onClick={handleOpenBuyMeCoffee}>
+        <BuyMeCoffee
+          height={'24px'}
+          width={'24px'}
+          style={{ marginRight: '0.5rem' }}
+        />
+        <Paragraph>Buy me a tea</Paragraph>
+      </SupportButton>
+      <SupportButton onClick={handleOpenKoFi}>
+        <KoFi
+          height={'24px'}
+          width={'24px'}
+          style={{ marginRight: '0.5rem' }}
+        />
+        <Paragraph>Buy me a ko-fi</Paragraph>
+      </SupportButton>
+    </SupportContainer>
   );
 };