leumas-private-shared/src/LMS-WildCard-Helpers/Schemas/SchemaGrid.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

// SchemaGrid.jsx
import React, { useEffect, useState } from 'react';
import { fetchSchemas } from './Helpers/fetchSchemas';
import { excludedSchemas } from './ExcludedSchemas';
import { useNavigate } from 'react-router-dom';

const SchemaGrid = () => {
    const [schemas, setSchemas] = useState([]);
    const [filteredSchemas, setFilteredSchemas] = useState([]);
    const [searchQuery, setSearchQuery] = useState('');
    const [error, setError] = useState(null);
    const navigate = useNavigate();

    useEffect(() => {
        const apiEndpoint = import.meta.env.VITE_REACT_APP_LEUMAS_API_ENDPOINT;

        fetchSchemas(
            (data) => {
                setSchemas(data);
                setFilteredSchemas(data);
            },
            (error) => setError(error.message),
            apiEndpoint,
            excludedSchemas
        );
    }, []);

    useEffect(() => {
        setFilteredSchemas(
            schemas.filter((schema) =>
                schema.toLowerCase().includes(searchQuery.toLowerCase())
            )
        );
    }, [searchQuery, schemas]);

    return (
        <div className="min-h-screen bg-gray-100 p-4">
            <header className="text-center my-6">
                <h1 className="text-4xl font-bold text-gray-800">Schemas</h1>
            </header>
            <div className="max-w-md mx-auto mb-6">
                <input
                    type="text"
                    className="w-full p-2 border border-gray-300 rounded-lg"
                    placeholder="Search schemas..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                />
            </div>
            {error && <p className="text-red-500 text-center">{error}</p>}
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {filteredSchemas.map((schema, index) => (
                    <div
                        key={index}
                        className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"
                        onClick={() => navigate(`/schema-grid/${schema}`)}
                    >
                        <button className="w-full text-lg font-semibold text-gray-700">
                            {schema}
                        </button>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default SchemaGrid;