hacer una card mas elegante con tailwind
import React from "react";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import { useSelector, useDispatch } from "react-redux";
import { closePaymentModal } from "@/slices/paymentsSlice";
const PaymentDetailsModal = () => {
const dispatch = useDispatch();
const open = useSelector((state) => state.payments.paymentModalOpen);
const payment = useSelector((state) => state.payments.selectedPayment);
if (!payment) return null;
return (
<Dialog open={open} onClose={() => dispatch(closePaymentModal())} maxWidth="sm" fullWidth>
<DialogTitle>Detalles del Pago</DialogTitle>
<DialogContent dividers>
<div>
<b>ID:</b> {payment.id || payment.guid}
</div>
<div>
<b>Cliente:</b> {payment.customerName || payment.name}
</div>
<div>
<b>Email:</b> {payment.customerEmail}
</div>
<div>
<b>Monto:</b> {payment.amount}
</div>
<div>
<b>Fecha de vencimiento:</b> {payment.dueDate || payment.date}
</div>
<div>
<b>Estado:</b> {payment.status}
</div>
</DialogContent>
<DialogActions>
<Button onClick={() => dispatch(closePaymentModal())} color="primary">
Cerrar
</Button>
</DialogActions>
</Dialog>
);
};
export default PaymentDetailsModal;
Te ayudo a crear una card más elegante usando Tailwind CSS para reemplazar el modal de Material-UI. Basándome en la imagen que proporcionaste, crearé un diseño moderno y limpio.
He creado una versión mucho más elegante del modal de detalles de pago usando Tailwind CSS. Las mejoras incluyen:
no puedo ver el codigo
Te muestro el código de la card elegante con Tailwind CSS:
payment-details-modal.tsx
lucide-react instalado para los iconos¿Puedes ver el código ahora? ¿Te gustaría que ajuste algún aspecto del diseño?