windmill dashboard nextjs typescript

Windmill Dashboard Next.js TypeScript

Vea el proyecto original de @estevanmaito

Con la ayuda de otros contribuyentes:

• Versión de mecanografiado de @NeutralBoy
• Versión de NextJS de @aldhanekaa

Verlo en vivo

Esta no es una plantilla. Esta es una aplicación completa, construida sobre React, con todos los detalles pequeños cuidados, por lo que solo necesita traer los datos para alimentarlos.

La accesibilidad es una prioridad en mis proyectos y creo que también debería estar en la suya, por lo que esto se desarrolló escuchando a lectores de pantalla reales, trampas de enfoque y navegación de teclado están disponibles en todas partes.

? Características

• ? Accesible a través (desarrollado con lectores de pantalla)
• ? Tema oscuro habilitado (cargue incluso imágenes diferentes basadas en el tema)
• ? Componentes múltiples (personalizados)
• ⚡ División de código
• CSS de viento de cola
• Windmill React ui
• Heroicones
• Chart.js

Documento

Componentes generales

El panel de viento React está construido sobre la interfaz de usuario React React. Encontrará la documentación para cada componente pequeño allí.

Ejemplo de boilerplate

Todos los componentes y contenedores se guardan en el ejemplo de la carpeta

Enrutamiento

Cambiar redirección predeterminada cuando presione el / o home en el archivo next.config.js

  async redirects ( ) {
    return [
      {
        source : '/' ,
        destination : '/example/login' ,
        permanent : false ,
      } ,
    ]
  } 

Rutas de la barra lateral

Para configurar los menús de la barra lateral, consulte el archivo (rutas/barra lateral.tsx).

Estas son las rutas que se mostrarán en la barra lateral. Esperan tres propiedades:

• path : el destino;
• name : el nombre a mostrar;
• icon : un icono para ilustrar el artículo

Elemento que se usa como desplegables, como la opción de páginas, no necesitan una path , pero espere una matriz de objetos de routes con path y name :

 // sidebar.js
{
  path : '/example/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/example/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/example/create-account' ,
      name : 'Create account' ,
    } ,

Este es un proyecto Next.js arrancado con create-next-app .

Empezando

Primero, instalar dependencias:

npm install
# or
yarn install

Luego, puede ejecutar el servidor de desarrollo:

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 con su navegador para ver el resultado.

Puede comenzar a editar la página modificando pages/index.tsx . La página se actualiza automáticamente mientras edita el archivo.

Se puede acceder a las rutas API en http: // localhost: 3000/API/Hello. Este punto final se puede editar en pages/api/hello.ts .

El directorio pages/api se asigna a /api/* . Los archivos en este directorio se tratan como rutas API en lugar de páginas reaccionadas.

Obtenga más información

Para obtener más información sobre Next.js, eche un vistazo a los siguientes recursos:

• Documentación Next.JS - Aprenda sobre las funciones de Next.js y la API.
• Aprende Next.js - Un tutorial interactivo Next.js.

Puede consultar el repositorio Next.js GitHub: ¡sus comentarios y contribuciones son bienvenidos!

Desplegar en Vercel

La forma más fácil de implementar su aplicación Next.js es usar la plataforma Vercel de los creadores de Next.js.

Consulte nuestra documentación de implementación Next.js para obtener más detalles.