import React from "react"; import { Row, Col, Tabs, Tab } from "react-bootstrap"; import CategoryTopicCard from "../../common/categoryTopicCard"; function UserCategoriesTopicsContainer(props) { return ( <Tabs variant="pills" defaultActiveKey="categories"> <Tab eventKey="categories" title={`Categories (${props.categoriesCreated.length})`} > <Row className="user-categories-topics-list"> {props.categoriesCreated.map((category) => ( <Col key={category._id} md={props.columnValue}> <CategoryTopicCard entityType="category" category={category} /> </Col> ))} </Row> </Tab> <Tab eventKey="topics" title={`Topics (${props.topicsCreated.length})`} > <Row className="user-categories-topics-list"> {props.topicsCreated.map((topic) => ( <Col key={topic._id} md={props.columnValue}> <CategoryTopicCard entityType="topic" category={{ _id: topic.parentCategory }} topic={topic} /> </Col> ))} </Row> </Tab> </Tabs> ); } export default UserCategoriesTopicsContainer;