Initial commit

resources/js/components/Footer/Footer.module.css

@@ -0,0 +1,40 @@
+.footer {
+    font-size: 2rem;
+    text-align: center;
+    font-weight: 300;
+    position: relative;
+    color: white;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #242422;
+    padding: 20px 0;
+}
+
+.footer a {
+    color: #edb265;
+}
+
+.footer-icons {
+    margin-right: 5px;
+}
+
+.links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 2.5rem;
+}
+
+.links a {
+    margin-right: 20px;
+    color: white;
+    display: block;
+}
+
+.links a > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

resources/js/components/Footer/Footer.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faFacebook, faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from '@inertiajs/react';
+import styles from './Footer.module.css';
+
+const BrandsIcons = {
+    faFacebook,
+    faGoogle,
+}
+
+interface FooterLink {
+    type: 'link';
+    data: {
+        name: string;
+        icon?: keyof typeof BrandsIcons;
+        link: string;
+        external: boolean;
+    };
+}
+
+export default function Footer() {
+    const [links, setLinks] = React.useState<FooterLink[]>([]);
+
+    React.useEffect(() => {
+        fetch('/api/footer')
+            .then(res => res.json())
+            .then(response => {
+                if (response.status === 'success') {
+                    setLinks(response.data);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching footer links:', error);
+            });
+    }, []);
+    return (
+        <footer className={styles.footer}>
+            <div className={styles.links}>
+                {links && links.length > 0 && links.map((link, index) => {
+                    const icon: IconDefinition | null = link.data.icon ? BrandsIcons[link.data.icon] : null;
+
+                    const linkContent = (
+                        <>
+                            {icon && <FontAwesomeIcon icon={icon} className={styles['footer-icons']} />}
+                            {link.data.name}
+                        </>
+                    );
+
+                    return link.data.external ? (
+                        <a
+                            key={index}
+                            href={link.data.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center text-white/80 hover:text-accent transition-colors"
+                        >
+                            {linkContent}
+                        </a>
+                    ) : (
+                        <Link
+                            key={index}
+                            href={link.data.link}
+                            className="flex items-center text-white/80 hover:text-accent transition-colors"
+                        >
+                            {linkContent}
+                        </Link>
+                    );
+                })}
+            </div>
+            <div>© {new Date().getFullYear()} GHOST PIZZA Krzysztof Szymański. Wszelkie prawa zastrzeżone.</div>
+            <div>Wykonane przez <a target="_blank" rel="noreferrer" href='https://bwitek.dev'>BWitek.dev</a></div>
+        </footer>
+    );
+}