leumas-private-shared/src/LMS-WildCard-Helpers/Schemas/SchemaDetails.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

// SchemaDetail.jsx
import { useParams } from 'react-router-dom';
import React, { useEffect } from 'react';
import { FaGlobe, FaUser, FaPlus, FaRobot } from 'react-icons/fa';
import './SchemaDetails.css'; // Import custom CSS for animations

const SchemaDetail = () => {
    const { schemaName } = useParams();

    const handleFindAllPublic = () => {
        console.log(`Finding all public items for schema: ${schemaName}`);
        // Implement the logic for finding all public items here
    };

    const handleFindAllCreated = () => {
        console.log(`Finding all created items for schema: ${schemaName}`);
        // Implement the logic for finding all created items here
    };

    const handleCreateNew = () => {
        console.log(`Creating new item for schema: ${schemaName}`);
        // Implement the logic for creating a new item here
    };

    const handleGenerateWithAI = () => {
        console.log(`Generating new item with AI for schema: ${schemaName}`);
        // Implement the logic for generating a new item with AI here
    };

    useEffect(() => {
        const buttons = document.querySelectorAll('.animated-button');
        buttons.forEach((button, index) => {
            setTimeout(() => {
                button.classList.add('slide-in');
            }, index * 100); // delay each button's animation
        });
    }, []);

    return (
        <div className="h-full p-4">
            <header className="text-center my-6">
                <h1 className="text-4xl font-bold ">{schemaName} Details</h1>
            </header>
            <div className="max-w-4xl mx-auto mb-6">

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <button
                        onClick={handleFindAllPublic}
                        className="animated-button w-full bg-red-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-red-900"
                    >
                        <FaGlobe className="text-2xl text-red-900 mb-2" />
                        <span className="font-bold">Find All Public</span>
                    </button>
                    <button
                        onClick={handleFindAllCreated}
                        className="animated-button w-full bg-green-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-green-700"
                    >
                        <FaUser className="text-2xl text-green-700 mb-2" />
                        <span className="font-bold">Find All Created</span>
                    </button>
                    <button
                        onClick={handleCreateNew}
                        className="animated-button w-full bg-blue-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-blue-700"
                    >
                        <FaPlus className="text-2xl text-blue-700 mb-2" />
                        <span className="font-bold">Create New</span>
                    </button>
                    <button
                        onClick={handleGenerateWithAI}
                        className="animated-button w-full bg-black text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-gray-900"
                    >
                        <FaRobot className="text-2xl text-gray-500 mb-2" />
                        <span className="font-bold">Generate with AI</span>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default SchemaDetail;