CreatorCenter_OOIN/src/pages/Database.jsx

import React from 'react';
import DatabaseFilter from '../components/DatabaseFilter';
import DatabaseList from '../components/DatabaseList';
import SearchBar from '../components/SearchBar';
import { Button } from 'react-bootstrap';
export default function Database({ path }) {
    return (
        <React.Fragment>
            <div className='function-bar'>
                <SearchBar />
                <Button>+ Add to Campaign</Button>
            </div>
            <div className='breadcrumb'>
                <div className='breadcrumb-item'>Creator Database</div>
                {path === 'tiktok' && <div className='breadcrumb-item'>TikTok</div>}
                {path === 'instagram' && <div className='breadcrumb-item'>Instagram</div>}
                {path === 'youtube' && <div className='breadcrumb-item'>YouTube</div>}
            </div>
            <DatabaseFilter path={path} />
            <DatabaseList path={path} />
        </React.Fragment>
    );
}