Buenas tardes necesito porfavor si alguien me puede ayudar, crear una targeta en la cual lleva un mensage, color e icono segun el estado de una poliza
Cree un archivo js con titulo, descripcion, color e icono
// import WaringIcon from '../../src/assets/images/WaringIcon.svg';
import iconrequires from '../../src/assets/images/iconrequires.svg';
import Iconinspection from '../../src/assets/images/Iconinspection.svg';
import Iconrejected from '../../src/assets/images/Iconrejected.svg';
export const statusMessages = [
{
id: 1,
icons: iconrequires,
status: 'PROCESINS',
color: '#B85D00',
title: 'Inspeccion en proceso',
description: 'Tu inspección está en proceso de análisis y revisión',
},
{
id: 2,
icons: Iconrejected,
status: 'RECHAZADA',
color: '#D32F2F',
title: 'Inspección rechazada',
description:
'La inspección realizada a su vehículo no fue aprobada. Por favor contacta a tu ejecutivo',
},
{
id: 3,
icons: iconrequires,
status: 'ENPROCESO',
color: '#0061F5',
title: 'Este vehículo requiere inspección',
description: 'Solicitaremos una inspección para esta placa',
},
{
id: 4,
icons: Iconinspection,
status: 'NOREQUERIDO',
color: '#008040',
title: 'Este vehículo no requiere inspección',
description: 'Puedes continuar con el proceso de emisión',
},
{
id: 5,
icons: Iconinspection,
status: 'APROBADA',
color: '#008040',
title: 'Inspección aprobada',
description: 'La solicitud de inspección se encuentra aprobada para esta placa',
},
];
Y lo estoy mapeando en un archivo jsx
import React from 'react';
import { statusMessages } from 'utils/statusMessages';
const messages = statusMessages;
const StatusMessageInfo = () => {
const filteredMessages = messages.filter(
(message) =>
message.status === 'APROBADA' ||
message.status === 'RECHAZADA' ||
message.status === 'NOREQUERIDO' ||
message.status === 'APROBADA' ||
message.status === 'PROCESINS',
);
console.log(filteredMessages);
return (
<div>
{filteredMessages.map((message) => (
<div className={`bg-white w-865.99 h-60 mt-10 border-left border-l-${message.color}}`}>
<div key={message.id}>
<img src={message.icons} alt="" />
<p className={`text-${message.color}`}>{message.title}</p>
<p>{message.description}</p>
</div>
</div>
))}
</div>
);
};
export default StatusMessageInfo;
Pero al momento de renderizar las targetas se muestran todas y no segun el estado como deberia de ser.
SI me pueden ayudar les agradeceria