Initial commit

resources/js/components/ActionButtons/ActionButtons.module.css

@@ -0,0 +1,74 @@
+.phone {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #f7941f;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.phone-fixed {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #f7941f;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+
+.onlineorder {
+    margin: 5px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #ED561A;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.onlineorder-fixed {
+    position: fixed;
+    right: 20px;
+    bottom: 84px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #ED561A;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.onlineorder:hover, .onlineorder-fixed:hover {
+    background-color: #d12600;
+}
+
+.phone-icon {
+    margin-right: 7px;
+}
+
+.cart-icon {
+    margin-right: 7px;
+}
+
+.phone-link:hover {
+    text-decoration: none;
+}

resources/js/components/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faCartShopping, faPhone } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styles from './ActionButtons.module.css';
+import { Link } from '@inertiajs/react';
+
+const SolidIcons = {
+    faCartShopping,
+    faPhone,
+}
+
+interface ButtonData {
+    type: 'link';
+    data: {
+        name: string;
+        icon: keyof typeof SolidIcons;
+        btn_style: 'primary' | 'secondary';
+        link: string;
+        external: boolean;
+        new_tab: boolean;
+    };
+}
+
+interface ActionButtonsProps {
+    variant?: 'default' | 'floating';
+}
+
+export const ActionButtons: React.FC<ActionButtonsProps> = ({ variant = 'default' }) => {
+    const [buttons, setButtons] = React.useState<ButtonData[]>([]);
+
+    React.useEffect(() => {
+        fetch('/api/buttons')
+            .then(res => res.json())
+            .then(response => {
+                if (response.status === 'success') {
+                    setButtons(response.data);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching buttons:', error);
+            });
+    }, []);
+
+
+
+    return (
+        <div>
+            {buttons && buttons.length > 0 && buttons.map((button, index) => {
+                const icon: IconDefinition | null = button.data.icon ? (SolidIcons[button.data.icon] as IconDefinition) : null;
+                const isPrimary = button.data.btn_style === 'primary';
+
+                const buttonClass = variant === 'floating' 
+                ? isPrimary ? styles['onlineorder-fixed'] : styles['phone-fixed']
+                : isPrimary ? styles.onlineorder : styles.phone;
+
+                return button.data.external ? (
+                    <div className={buttonClass} key={index}>
+                        <a
+                            href={button.data.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles['phone-link']}
+                        >
+                            {icon && <FontAwesomeIcon className={isPrimary ? styles['cart-icon'] : styles['phone-icon']} icon={icon} />}
+                            <span>{button.data.name}</span>
+                        </a>
+                    </div>
+                ) : (
+                    <div className={buttonClass} key={index}>
+                        <Link  
+                            href={button.data.link}
+                            className={styles['phone-link']}
+                        >
+                            {icon && <FontAwesomeIcon className={isPrimary ? styles['cart-icon'] : styles['phone-icon']} icon={icon} />}
+                            <span>{button.data.name}</span>
+                        </Link>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};