In this example, a prompts
array with dummy data, and then used the map
function to iterate through the array and generate a .prompt-box
element for each item. The key
prop is set to the index
for React to keep track of each element efficiently. You can customize the dummy data or add more items to the prompts
array as needed.
import React from 'react';
const ScrollableMain = () => {
// Dummy data for the loop
const prompts = [
{ title: 'Title of prompt 1', description: 'Lorem ipsum dolor sit amet 1' },
{ title: 'Title of prompt 2', description: 'Lorem ipsum dolor sit amet 2' },
{ title: 'Title of prompt 3', description: 'Lorem ipsum dolor sit amet 3' },
// Add more items as needed
];
return (
<main className="buddy-main">
{/* Your scrollable main content goes here */}
<div className="buddy-main-container">
<div className="prompt-container">
<div className="prompt-group">
{prompts.map((prompt, index) => (
<div key={index} className="prompt-box">
<div className='prompt-title'>{prompt.title}</div>
<div className='prompt-desc'>{prompt.description}</div>
</div>
))}
</div>
</div>
</div>
</main>
);
};
export default ScrollableMain;