De esta manera cambi茅 el color del Alert:
const color = alert.type === 'success' ? 'green-100' : 'red-500';
return (
<>
{alert.active && (
<div x-data className={`bg-${color} p-5 w-full rounded mb-8`}>
Introducci贸n
Construye un dashboard de productos con Next.js
Configuraci贸n del proyecto
Inicializando nuestro proyecto con Next.js
Configuraci贸n de ESLint y Prettier
Integrando PostCSS y TailwindCSS a nuestro proyecto
Configuraci贸n del archivo jsconfig.js
C贸mo integrar componentes predefinidos con TailwindUI
Commons Components
Creaci贸n del layout principal e integraci贸n de los Page Components
Autenticaci贸n
Creando la l贸gica del componente login
Presentaci贸n de la API
Creaci贸n del custom hook useAuth
Autentic谩ndonos en la API usando Axios
Obteniendo el token de la API
Guardado del token en una cookie para mantener la sesi贸n
Usando nuestro useAuth para cargar la informaci贸n del usuario
Integraci贸n de la API
Obteniendo la lista de productos desde la API
Creando el componente Chart
Implementaci贸n de nuestro componente Chart en el dashboard
Conexi贸n del modal para crear productos
Construcci贸n del modal para crear productos
Inserci贸n de los datos del producto en la API
Creaci贸n del componente Alert
Implementaci贸n de nuestro componente Alert
Eliminado de productos en la API
Creaci贸n y cargado de datos para actualizar un producto
Actualizado del producto en la API
Implementaci贸n del logout
Deploy a producci贸n
Haciendo el deploy de nuestra aplicaci贸n en Vercel
Conexi贸n de un subdominio a nuestra aplicaci贸n
Cierre
Contin煤a alimentando tu proyecto
Conclusiones y cierre del curso
A煤n no tienes acceso a esta clase
Crea una cuenta y contin煤a viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesi贸n
Implementaci贸n de nuestro componente Alert
23/31Recursos
Aportes 2
Preguntas 0
Ordenar por:
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.