1  import React, { useEffect, useState } from 'react';
 2  import { getPeopleFromFirestore, updatePersonDoc } from "../utils/firebase";
 3  import PersonCard from './PersonCard'; // Adjust the import path according to your project structure
 4  
 5  export default function CardList() {
 6    const [data, setData] = useState([]);
 7    const [loading, setLoading] = useState(true);
 8  
 9    const fetchPeople = async () => {
10      try {
11        const fetchedPeople = await getPeopleFromFirestore();
12        setData(fetchedPeople);
13        setLoading(false);
14      } catch (error) {
15        console.error("Error fetching people:", error);
16        setLoading(false);
17      }
18    };
19  
20    useEffect(() => {
21      fetchPeople();
22    }, []);
23  
24    return (
25      <div key="1" className="flex flex-col w-full min-h-screen">
26        {/* Header and other UI elements */}
27        {loading && <p className='text-white'>Loading people...</p>}
28        <main className="flex flex-col bg-black">
29          
30          {data.map((person: any) => (
31            <PersonCard key={person.id} {...person} updatePersonDoc= {updatePersonDoc}/>
32          ))}
33        </main>
34      </div>
35    );
36  }