CreatorCenter_OOIN/src/components/DiscoveryList.jsx

import { Table } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

export default function DiscoveryList() {
    const creators = useSelector((state) => state.discovery.creators);

    return (
        <div className='discovery-list'>
            <Table responsive hover className='bg-white shadow-xs rounded overflow-hidden border-1'>
                <thead>
                    <tr>
                        <th className='text-center'>Sessions</th>
                        <th className='text-center'>#Creator</th>
                        <th className='text-center'>#Shoppable Creators</th>
                        <th className='text-center'>Avg.Followers</th>
                        <th className='text-center'>Avg.GMV</th>
                        <th className='text-center'>Avg.Video Views</th>
                        <th className='text-center'>Date</th>
                        <th className='text-center'>View Details</th>
                    </tr>
                </thead>
                <tbody>
                    {creators?.length > 0 && creators.map((creator) => (
                        <tr key={creator.id}>
                            <td className='text-center'>{creator.sessions}</td>
                            <td className='text-center'>{creator.creator}</td>
                            <td className='text-center'>{creator.shoppableCreators}</td>
                            <td className='text-center'>{creator.avgFollowers}</td>
                            <td className='text-center'>{creator.avgGMV}</td>
                            <td className='text-center'>{creator.avgVideoViews}</td>
                            <td className='text-center'>{creator.date}</td>
                            <td className='text-center'><Link to={`/creator/${creator.id}`}>View</Link></td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>
    );
}