102 lines
3.8 KiB
TypeScript
102 lines
3.8 KiB
TypeScript
import { Box, CircularProgress, Alert, Paper, Typography } from '@mui/material';
|
|
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
// Iconos de react-icons para cada grano
|
|
import { GiSunflower, GiWheat, GiCorn, GiGrain } from "react-icons/gi";
|
|
import { TbGrain } from "react-icons/tb";
|
|
|
|
import type { CotizacionGrano } from '../models/mercadoModels';
|
|
import { useApiData } from '../hooks/useApiData';
|
|
import { formatCurrency, formatDateOnly } from '../utils/formatters';
|
|
|
|
// Función para elegir el icono según el nombre del grano
|
|
const getGrainIcon = (nombre: string) => {
|
|
switch (nombre.toLowerCase()) {
|
|
case 'girasol':
|
|
return <GiSunflower size={28} color="#fbc02d" />;
|
|
case 'trigo':
|
|
return <GiWheat size={28} color="#fbc02d" />;
|
|
case 'sorgo':
|
|
return <TbGrain size={28} color="#fbc02d" />;
|
|
case 'maiz':
|
|
return <GiCorn size={28} color="#fbc02d" />;
|
|
default:
|
|
return <GiGrain size={28} color="#fbc02d" />;
|
|
}
|
|
};
|
|
|
|
// Subcomponente para una única tarjeta de grano
|
|
const GranoCard = ({ grano }: { grano: CotizacionGrano }) => {
|
|
const isPositive = grano.variacionPrecio > 0;
|
|
const isNegative = grano.variacionPrecio < 0;
|
|
const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
|
|
const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;
|
|
|
|
return (
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
p: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
flex: '1 1 180px',
|
|
minWidth: '180px',
|
|
maxWidth: '220px',
|
|
height: '160px',
|
|
borderTop: `4px solid ${isPositive ? '#2e7d32' : isNegative ? '#d32f2f' : '#bdbdbd'}`
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
|
{getGrainIcon(grano.nombre)}
|
|
<Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', ml: 1 }}>
|
|
{grano.nombre}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', my: 1 }}>
|
|
<Typography variant="h5" component="p" sx={{ fontWeight: 'bold' }}>
|
|
${formatCurrency(grano.precio)}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
por Tonelada
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
|
|
<Icon sx={{ fontSize: '1.1rem', mr: 0.5 }} />
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
|
|
{formatCurrency(grano.variacionPrecio)}
|
|
</Typography>
|
|
</Box>
|
|
<Typography variant="caption" align="center" sx={{ mt: 1, color: 'text.secondary' }}>
|
|
Operación: {formatDateOnly(grano.fechaOperacion)}
|
|
</Typography>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export const GranosCardWidget = () => {
|
|
const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
|
|
|
|
if (loading) {
|
|
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
|
|
}
|
|
|
|
if (error) {
|
|
return <Alert severity="error">{error}</Alert>;
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
return <Alert severity="info">No hay datos de granos disponibles.</Alert>;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
|
|
{data.map((grano) => (
|
|
<GranoCard key={grano.nombre} grano={grano} />
|
|
))}
|
|
</Box>
|
|
);
|
|
}; |