import React, { useState } from "react"; import PropTypes from "prop-types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import Paper from "@mui/material/Paper"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import ListItemText from "@mui/material/ListItemText"; import ListItemIcon from "@mui/material/ListItemIcon"; import DescriptionIcon from '@mui/icons-material/Description'; export const topicsSizeFraction = (topicsCentroids, topicSize) => { const totalSize = topicsCentroids.reduce((sum, topic) => sum + topic.size, 0); return Math.round((topicSize / totalSize) * 100); } function TextContainer({ topicName, topicSizeFraction, content }) { const [selectedDocument, setSelectedDocument] = useState(null); const handleDocumentClick = (docIndex) => { if (selectedDocument === docIndex) { setSelectedDocument(null); } else { setSelectedDocument(docIndex); } }; return (
{topicName} {topicSizeFraction}% of the Territory {content.map((doc, index) => ( handleDocumentClick(index)} selected={selectedDocument === index}> {/* Display a document icon */} {doc}} /> ))}
); } TextContainer.propTypes = { topicName: PropTypes.string.isRequired, topicSizeFraction: PropTypes.number.isRequired, content: PropTypes.array.isRequired, }; export default TextContainer;