This repository has been archived by the owner on Dec 16, 2024. It is now read-only.
generated from TBD54566975/tbd-project-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Modules and Verbs detail pages (#13)
- Loading branch information
1 parent
a998131
commit e2e3672
Showing
18 changed files
with
420 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,15 @@ | ||
| module.exports = { | ||
| env: { browser: true, es2020: true, node: true }, | ||
| extends: [ | ||
| "eslint:recommended", | ||
| "plugin:@typescript-eslint/recommended", | ||
| "plugin:react-hooks/recommended", | ||
| 'eslint:recommended', | ||
| 'plugin:@typescript-eslint/recommended', | ||
| 'plugin:react-hooks/recommended' | ||
| ], | ||
| parser: "@typescript-eslint/parser", | ||
| parserOptions: { ecmaVersion: "latest", sourceType: "module" }, | ||
| plugins: ["react-refresh"], | ||
| parser: '@typescript-eslint/parser', | ||
| parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, | ||
| plugins: ['react-refresh'], | ||
| rules: { | ||
| "react-refresh/only-export-components": "warn", | ||
| }, | ||
| }; | ||
| 'react-refresh/only-export-components': 'warn', | ||
| semi: ['error', 'never'] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; | ||
| autoprefixer: {} | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,28 @@ | ||
| import { Route, Routes } from "react-router-dom"; | ||
| import Modules from "./components/Modules"; | ||
| import Logs from "./components/Logs"; | ||
| import Layout from "./components/Layout"; | ||
| import { Navigate, Route, Routes } from 'react-router-dom' | ||
| import Logs from './components/Logs' | ||
| import Layout from './components/Layout' | ||
| import Module from './components/Module' | ||
| import Navigation from './components/Navigation' | ||
| import ModuleList from './components/ModuleList' | ||
| import Verb from './components/Verb' | ||
|
|
||
| function App() { | ||
| return ( | ||
| <> | ||
| <Navigation /> | ||
| <Routes> | ||
| <Route path="/" element={<Layout />}> | ||
| <Route index element={<Modules />} /> | ||
| <Route element={<Layout />}> | ||
| <Route path="/" element={<Navigate to="/modules" replace />} /> | ||
| <Route path="modules"> | ||
| <Route index element={<ModuleList />} /> | ||
| <Route path={':id'} element={<Module />} /> | ||
| <Route path={':moduleId/verbs/:id'} element={<Verb />} /> | ||
| </Route> | ||
| <Route path="logs" element={<Logs />} /> | ||
| </Route> | ||
| </Routes> | ||
| </> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| export default App; | ||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,13 @@ | ||
| import Navigation from "./Navigation"; | ||
| import { Outlet } from "react-router-dom"; | ||
| import { Outlet } from 'react-router-dom' | ||
| const Layout = () => { | ||
| return ( | ||
| <div className="min-h-full"> | ||
| <Navigation /> | ||
| <main> | ||
| <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8"> | ||
| <Outlet /> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Layout; | ||
| ) | ||
| } | ||
| export default Layout |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { useParams } from 'react-router-dom' | ||
| import { modules } from '../data/Modules' | ||
| import { classNames } from '../utils' | ||
| import { environments, statuses } from '../data/Types' | ||
| import VerbList from './VerbList' | ||
| import ModuleNotFound from './ModuleNotFound' | ||
|
|
||
| export default function Module() { | ||
| const { id } = useParams() | ||
| const module = modules.find(module => module.id === id?.toLocaleLowerCase()) | ||
|
|
||
| if (module === undefined) { | ||
| return <ModuleNotFound id={id} /> | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="relative flex items-center space-x-4 py-4"> | ||
| <div className="min-w-0 flex-auto"> | ||
| <div className="flex items-center gap-x-3"> | ||
| <div | ||
| className={classNames( | ||
| statuses[module.status], | ||
| 'flex-none rounded-full p-1' | ||
| )} | ||
| > | ||
| <div className="h-2 w-2 rounded-full bg-current" /> | ||
| </div> | ||
| <h2 className="min-w-0 text-sm font-semibold leading-6 text-gray-900 dark:text-white"> | ||
| <div className="flex gap-x-2"> | ||
| <span className="truncate">{module.name}</span> | ||
| <span className="text-gray-400">/</span> | ||
| <span className="whitespace-nowrap">{module.language}</span> | ||
| <span className="absolute inset-0" /> | ||
| </div> | ||
| </h2> | ||
| </div> | ||
| <div className="mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400"> | ||
| <p className="truncate">{module.description}</p> | ||
| <svg | ||
| viewBox="0 0 2 2" | ||
| className="h-0.5 w-0.5 flex-none fill-gray-300" | ||
| > | ||
| <circle cx={1} cy={1} r={1} /> | ||
| </svg> | ||
| <p className="whitespace-nowrap">{module.statusText}</p> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={classNames( | ||
| environments[module.environment], | ||
| 'rounded-full flex-none py-1 px-2 text-xs font-medium ring-1 ring-inset' | ||
| )} | ||
| > | ||
| {module.environment} | ||
| </div> | ||
| </div> | ||
| <h2 className="text-base font-semibold dark:text-white py-4">Verbs</h2> | ||
| <VerbList module={module} /> | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.