Default Component - Copy this React, Mui Component to your project

actually it's inside 1/3 or div, so I want to show them in a row."<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, backgroundColor: 'background.paper', p: 2, borderRadius: 2 }}> <Typography component="span" variant="h6" color="text.secondary" sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontWeight: 500 }} > <span style={{ color: 'text.primary', marginRight: 8 }}>Total Earned:</span> <span style={{ color: '#2EBD85', fontWeight: 600, fontSize: '1.1rem' }}> ${processedData.totalValue.toLocaleString()} <span style={{ color: 'text.secondary', fontSize: '0.9rem', marginLeft: 4 }}> ({processedData.validValueCount}/{processedData.totalLeads}) </span> </span> </Typography> <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}> <Typography component="span" variant="h6" color="text.secondary" sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontWeight: 500, width: '100%' }} > <span style={{ color: 'text.primary', marginRight: 8 }}>ROI:</span> <span style={{ color: ((processedData?.totalValue || 0) - (expenses?.total_expenses || 0)) >= 0 ? '#2EBD85' : 'F6465D', fontWeight: 600, fontSize: '1.1rem' }}> {((processedData?.totalValue || 0) - (expenses?.total_expenses || 0)).toLocaleString('en-US', { style: 'currency', currency: 'USD' })} </span> </Typography> </Box> </Box>"