Theme Creator

1import React, { useState, useEffect } from 'react';
2import { Button } from './components/Button';
3import { useTheme } from './hooks/useTheme';
4
5interface User {
6  id: number;
7  name: string;
8  email: string;
9  isActive: boolean;
10}
11
12// Main application component
13export function App(): JSX.Element {
14  const [users, setUsers] = useState<User[]>([]);
15  const [loading, setLoading] = useState(true);
16  const { theme, toggleTheme } = useTheme();
17
18  useEffect(() => {
19    async function fetchUsers() {
20      try {
21        const response = await fetch('/api/users');
22        const data = await response.json();
23        setUsers(data);
24      } catch (error) {
25        console.error('Failed to fetch:', error);
26      } finally {
27        setLoading(false);
28      }
29    }
30    fetchUsers();
31  }, []);
32
33  const activeUsers = users.filter(u => u.isActive);
34  const count = activeUsers.length;
35
36  return (
37    <div className={theme}>
38      <h1>User Dashboard</h1>
39      <p>Active users: {count}</p>
40      <Button onClick={toggleTheme}>
41        Toggle Theme
42      </Button>
43      {loading ? (
44        <span>Loading...</span>
45      ) : (
46        <ul>
47          {users.map(user => (
48            <li key={user.id}>{user.name}</li>
49          ))}
50        </ul>
51      )}
52    </div>
53  );
54}