Innovative Web & Mobile Solutions

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// Horizix App Component
const HorizixApp = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from API
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await axios.get('/api/solutions');
        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError('Failed to fetch data');
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="horizix-app">
      <header className="app-header">
        <h1>Welcome to Horizix Solutions</h1>
      </header>
      
      {loading ? (
        <div className="loading">Loading...</div>
      ) : error ? (
        <div className="error">{error}</div>
      ) : (
        <div className="solutions-list">
          {data.map((solution) => (
            <div className="solution-card" key={solution.id}>
              <h3>{solution.title}</h3>
              <p>{solution.description}</p>
              <div className="tech-stack">
                {solution.technologies.map((tech, index) => (
                  <span className="tech-badge" key={index}>
                    {tech}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default HorizixApp;
|