Add sponsor to feedback footer

HugoGresse · Nov 12, 2024 · b38ff52 · b38ff52
1 parent 283abdf
commit b38ff52
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 18 deletions.
diff --git a/src/baseComponents/useOSSSponsors.ts b/src/baseComponents/useOSSSponsors.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+import { OpenSponsorsUrl } from '../env.ts'
+
+export const useOSSSponsors = () => {
+    const [sponsors, setSponsors] = useState<
+        { name: string; website: string; logo: string; logoDark: string }[]
+    >([])
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const response = await fetch(OpenSponsorsUrl)
+            const data = await response.json()
+            setSponsors(data.sponsors || [])
+        }
+        fetchData()
+    }, [])
+
+    return sponsors
+}
diff --git a/src/env.ts b/src/env.ts
@@ -1,3 +1,2 @@
-import 'vite/client'
-
-export const ViteAuthDomain = import.meta.env.VITE_AUTH_DOMAIN
+// @ts-ignore
+export const OpenSponsorsUrl = import.meta.env.VITE_OPEN_SPONSORS
diff --git a/src/feedback/layout/Footer.jsx b/src/feedback/layout/Footer.jsx
@@ -2,11 +2,15 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, useTheme } from '@mui/material'
 import Link from '@mui/material/Link'
+import { useOSSSponsors } from '../../baseComponents/useOSSSponsors.ts'
 
 export const Footer = () => {
     const { t } = useTranslation()
     const theme = useTheme()
-    const logoColor = theme.palette.mode === 'dark' ? 'white' : 'black'
+    const isDarkMode = theme.palette.mode === 'dark'
+    const logoColor = isDarkMode ? 'white' : 'black'
+
+    const sponsors = useOSSSponsors()
 
     return (
         <Box
@@ -16,33 +20,62 @@ export const Footer = () => {
             padding={1}
             marginTop={2}
             color={theme.palette.textDimmed}
-            component="footer"
-        >
+            component="footer">
             <span style={{ marginRight: 6, marginTop: -2 }}>
                 {t('footer.madeBy')}
             </span>
             <a
                 href="https://github.com/HugoGresse/open-feedback"
                 target="_blank"
-                rel="noopener noreferrer"
-            >
+                rel="noopener noreferrer">
                 <img
                     height="25"
                     src={`/static/logos/openfeedback-${logoColor}-orange.svg`}
                     alt="open feedback"
                 />
             </a>
 
-            <Link
-                href="https://github.com/sponsors/HugoGresse"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ color: theme.palette.primary.contrastText }}
-            >
-                <span style={{ left: 16, top: -2, position: 'relative' }}>
-                    {t('common.donate')}
-                </span>
-            </Link>
+            <Box
+                display="flex"
+                flexDirection="row"
+                paddingRight={1.8}
+                paddingTop={0.5}
+                gap={2}
+                borderRadius={10}
+                border="1px solid #888"
+                alignItems="center"
+                marginTop={-2}
+                marginLeft={2}
+                justifyContent="center">
+                <Box marginInlineEnd={2}>
+                    <Link
+                        href="https://github.com/sponsors/HugoGresse"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: theme.palette.textDimmed }}>
+                        <span
+                            style={{ left: 16, top: -2, position: 'relative' }}>
+                            Devenir sponsor
+                        </span>
+                    </Link>
+                </Box>
+                {sponsors.map((sponsor) => (
+                    <Box
+                        component="a"
+                        href={sponsor.website}
+                        target="_blank"
+                        key={sponsor.name}
+                        sx={{ ':hover': { opacity: 0.4 } }}>
+                        <img
+                            src={
+                                (isDarkMode && sponsor.logoDark) || sponsor.logo
+                            }
+                            alt={sponsor.name}
+                            style={{ height: 30, borderRadius: 5 }}
+                        />
+                    </Box>
+                ))}
+            </Box>
         </Box>
     )
 }