windmill dashboard nextjs typescript

Панель панели ветров

Смотрите оригинальный проект @eStevanmaito

С помощью других участников:

• TypeScript версия @neutralboy
• Версия NextJS от @aldhanekaa

Смотрите вживую

Это не шаблон. Это полное приложение, построенное на вершине React, со всеми крошечными деталями, которые заботятся о том, что вам просто нужно принести данные для их подачи.

Доступность является приоритетом в моих проектах, и я думаю, что она должна быть и в ваших, так что это было разработано, прослушивая реальных читателей экрана, фокусные ловушки и навигация по клавиатуре доступны везде.

? Функции

• ? Через доступность (разработано с использованием считывателей экрана)
• ? Темная тема включена (загружайте даже разные изображения на основе темы)
• ? Несколько (пользовательские) компоненты
• ⚡ Кодовое расщепление
• Tailwind CSS
• Ветряная мельница реагирует UI
• Героиконы
• Chart.js

Док

Общие компоненты

Реакция ветряной мельницы реагирует на пользовательском интерфейсе windmill React. Вы найдете документацию для каждого небольшого компонента там.

Пример котлера

Все компоненты и контейнеры сохраняются в примере папки

Маршрутизация

Изменить перенаправление по умолчанию, когда нажмите / или home в файле next.config.js

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

По боковой панели маршрутов

Для настройки меню боковой панели см. Файл (routs/sidebar.tsx).

Это маршруты, которые будут показаны на боковой панели. Они ожидают три объекта:

• path : пункт назначения;
• name : Имя должно быть показано;
• icon : значок, чтобы проиллюстрировать элемент

Элемент, который используется в качестве раскрывающихся списков, например, на страницы, не нужен path , но ожидайте, что routes массивы объектов с path и 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' ,
    } ,

Это проект Next.js, загруженный с create-next-app .

Начиная

Во -первых, установить зависимости:

npm install
# or
yarn install

Затем вы можете запустить сервер разработки:

npm run dev
# or
yarn dev

Откройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат.

Вы можете начать редактировать страницу путем изменения pages/index.tsx . Страница автоматически обновится при редактировании файла.

Доступ к API можно получить на http: // localhost: 3000/api/hello. Эта конечная точка может быть отредактирована на pages/api/hello.ts .

Каталог pages/api сопоставлен /api/* . Файлы в этом каталоге рассматриваются как маршруты API вместо страниц реагирования.

Узнать больше

Чтобы узнать больше о следующем.js, посмотрите на следующие ресурсы:

• Next.js Документация - Узнайте о функциях Next.js и API.
• Узнайте Next.js - интерактивный учебник Next.js.

Вы можете проверить хранилище следующего.js GitHub - ваши отзывы и вклады приветствуются!

Развернуть на Vercel

Самый простой способ развернуть ваше приложение.

Ознакомьтесь с нашей документацией по развертыванию Next.js для получения более подробной информации.