41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
function ColumnLayout({ paragraph }) {
|
||
|
|
// Split the paragraph into sentences
|
||
|
|
const sentences = paragraph.split('. ')
|
||
|
|
|
||
|
|
// Count the number of sentences that contain images
|
||
|
|
const imageSentences = sentences.filter((sentence) =>
|
||
|
|
sentence.includes('<img')
|
||
|
|
)
|
||
|
|
|
||
|
|
let columnCount
|
||
|
|
|
||
|
|
if (imageSentences.length === 1) {
|
||
|
|
columnCount = 1
|
||
|
|
} else if (imageSentences.length === 2) {
|
||
|
|
columnCount = 2
|
||
|
|
} else if (imageSentences.length >= 3) {
|
||
|
|
columnCount = 3
|
||
|
|
} else {
|
||
|
|
columnCount = 1 // Default to one column if no images are found
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generate an array of columns
|
||
|
|
const columns = Array.from({ length: columnCount }, (_, index) => (
|
||
|
|
<div key={index} className="column">
|
||
|
|
{/* Render the sentences for this column */}
|
||
|
|
{imageSentences
|
||
|
|
.slice(
|
||
|
|
index * (imageSentences.length / columnCount),
|
||
|
|
(index + 1) * (imageSentences.length / columnCount)
|
||
|
|
)
|
||
|
|
.map((sentence, i) => (
|
||
|
|
<p key={i}>{sentence}</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
|
||
|
|
return <div className="column-layout">{columns}</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ColumnLayout
|