During navigation development. Trying to work out comfy workflow with navigation elements
This commit is contained in:
parent
8ea78084c9
commit
98dc854936
GPG Key ID:
EA4CE0D1E2A6DC98
@ -1,6 +1,6 @@
|
||||
# TailwindElements-React-Starter
|
||||
|
||||
- __nothing__ - main styling
|
||||
- [DaisyUI](https://daisyui.com/) - main styling
|
||||
- [react-icons](https://react-icons.github.io/react-icons/) - big icon library
|
||||
- [recharts](https://echarts.apache.org/) - charts library
|
||||
- [wouter](https://github.com/molefrog/wouter) - router library
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/icon.png" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -15,13 +15,14 @@
|
||||
"@hookform/resolvers": "^3.3.2",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tanstack/react-table": "^8.10.7",
|
||||
"appwrite": "^13.0.0",
|
||||
"axios": "^1.6.1",
|
||||
"daisyui": "latest",
|
||||
"echarts": "^5.4.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.48.2",
|
||||
"react-icons": "^4.12.0",
|
||||
"recharts": "^2.10.1",
|
||||
"uuid": "^9.0.1",
|
||||
"wouter": "^2.12.1",
|
||||
"zod": "^3.22.4"
|
||||
|
||||
@ -6,6 +6,7 @@ export const main = {
|
||||
viteEnv.MODE ? " [development]" : ""
|
||||
}`,
|
||||
program_version: "1.0.0",
|
||||
basePath: viteEnv.VITE_BASE_PATH,
|
||||
};
|
||||
//About page configuration
|
||||
export const about = {
|
||||
|
||||
1
src/consts.ts
Normal file
1
src/consts.ts
Normal file
@ -0,0 +1 @@
|
||||
export const ADMINISTRATION = "administration";
|
||||
5
src/features/AdministrationPage.tsx
Normal file
5
src/features/AdministrationPage.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const AdministrationPage = () => {
|
||||
return <div>🚀AdministrationPage🚀</div>;
|
||||
};
|
||||
|
||||
export default AdministrationPage;
|
||||
@ -1,19 +1,31 @@
|
||||
import ThemeButton from "../components/ThemeButton";
|
||||
import { main } from "../configure";
|
||||
import { Router } from "wouter";
|
||||
import SwitchRoutesGenerator from "../routes/RouteStructureGenerator";
|
||||
import DebugNavigationButtonsGenerator from "../routes/DebugNavigationButtonsGenerator";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="space-x-4 space-y-6 m-4">
|
||||
<div className="px-5 mt-6">
|
||||
<h1 className="text-center ">
|
||||
{main.program_name} v{main.program_version}
|
||||
</h1>
|
||||
<Router base={main.basePath}>
|
||||
<div className="space-x-4 space-y-6">
|
||||
<div className="px-5 mt-6">
|
||||
<h1 className="text-center ">
|
||||
{main.program_name} v{main.program_version}
|
||||
<p>Base path is: {main.basePath}</p>
|
||||
</h1>
|
||||
<div>
|
||||
<ThemeButton />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-12 h-[2px] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-current to-transparent opacity-25 dark:opacity-100" />
|
||||
|
||||
<div>
|
||||
<ThemeButton />
|
||||
<DebugNavigationButtonsGenerator />
|
||||
{/* Paths in Route should be without base path (even without '/'). If want Route for base path than pass base path */}
|
||||
<SwitchRoutesGenerator />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-12 h-[2px] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-current to-transparent opacity-25 dark:opacity-100" />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
16
src/features/HomePage.tsx
Normal file
16
src/features/HomePage.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { useState } from "react";
|
||||
|
||||
const HomePage = () => {
|
||||
const [counter, setCounter] = useState<number>(0);
|
||||
return (
|
||||
<div>
|
||||
<p>HomePage</p>
|
||||
<button className="btn btn-sm" onClick={() => setCounter(counter + 1)}>
|
||||
Click me
|
||||
</button>
|
||||
<div>Counter: {counter}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
5
src/features/InboxPage.tsx
Normal file
5
src/features/InboxPage.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const InboxPage = () => {
|
||||
return <div>InboxPage</div>;
|
||||
};
|
||||
|
||||
export default InboxPage;
|
||||
@ -5,6 +5,7 @@ import { viteEnv } from "./configure";
|
||||
import App from "./features/App";
|
||||
import inDev from "./utils/inDebug";
|
||||
import { Global, css } from "@emotion/react";
|
||||
import "/style.css";
|
||||
|
||||
setupAxiosInterceptors();
|
||||
inDev(() => console.log(viteEnv));
|
||||
|
||||
26
src/routes/DebugNavigationButtonsGenerator.tsx
Normal file
26
src/routes/DebugNavigationButtonsGenerator.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import * as R from "../routes/routes";
|
||||
import { Link } from "wouter";
|
||||
/**
|
||||
* This component is used to generate buttons for debug navigation
|
||||
* UNFINISHED
|
||||
*/
|
||||
const DebugNavigationButtonsGenerator = () => {
|
||||
return (
|
||||
<div className="flex join mb-4">
|
||||
<Link className={`btn join-item hover:btn-primary duration-75 `} href="">
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
className={`btn join-item hover:btn-primary duration-75 `}
|
||||
href={R.routesRoot[1].path}
|
||||
>
|
||||
{R.routesRoot[1].icon &&
|
||||
React.createElement(R.routesRoot[1].icon, { className: "h-6 w-6" })}
|
||||
{R.routesRoot[1].name}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DebugNavigationButtonsGenerator;
|
||||
19
src/routes/RouteStructureGenerator.tsx
Normal file
19
src/routes/RouteStructureGenerator.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Route, Switch } from "wouter";
|
||||
import * as R from "./routes";
|
||||
|
||||
const SwitchRoutesGenerator = () => {
|
||||
const routesCrawler = (parentPath?: string): JSX.Element[] => {
|
||||
return R.routesRoot.map((route, index) => {
|
||||
return (
|
||||
<Route
|
||||
key={index}
|
||||
path={parentPath ? parentPath + route.path : route.path}
|
||||
component={route.component}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
return <Switch>{routesCrawler()}</Switch>;
|
||||
};
|
||||
|
||||
export default SwitchRoutesGenerator;
|
||||
65
src/routes/routes.tsx
Normal file
65
src/routes/routes.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
// ----- IMPORT ICONS -----
|
||||
import { RiHome3Fill } from "react-icons/ri";
|
||||
import { IoMdOptions } from "react-icons/io";
|
||||
import { FaUsers } from "react-icons/fa";
|
||||
// ----- IMPORT PAGES -----
|
||||
import AdministrationPage from "../features/AdministrationPage";
|
||||
import HomePage from "../features/HomePage";
|
||||
// ----- IMPORT CONSTS -----
|
||||
import { ADMINISTRATION } from "../consts";
|
||||
|
||||
// ----- TYPE DEFINITIONS -----
|
||||
type Route = {
|
||||
name: string;
|
||||
path: string;
|
||||
component: () => JSX.Element;
|
||||
icon?: () => JSX.Element;
|
||||
children?: Route[];
|
||||
};
|
||||
type RoutesObject = {
|
||||
[key: string]: Route[];
|
||||
};
|
||||
|
||||
// ----- ROUTES DEFINITIONS -----
|
||||
//! Don't leave trailor '/' in paths
|
||||
//! Paths in Route should be without base path (even without '/'). If want Route for base path than pass base path
|
||||
//* Wouter is basically join paths with each other, so if base path is "/" every sub path souldn't have "/" at the beginning
|
||||
|
||||
// const routesSecondLevel = {};
|
||||
|
||||
const routesFirstLevel: RoutesObject = {
|
||||
[ADMINISTRATION]: [
|
||||
{
|
||||
name: "Users",
|
||||
path: "/users",
|
||||
component: () => <>UserPage</>,
|
||||
icon: FaUsers,
|
||||
},
|
||||
{
|
||||
name: "Roles",
|
||||
path: "/roles",
|
||||
component: () => <>Roles</>,
|
||||
},
|
||||
{
|
||||
name: "Permissions",
|
||||
path: "/permissions",
|
||||
component: () => <>Permissions</>,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const routesRoot: Route[] = [
|
||||
{
|
||||
name: "Home",
|
||||
path: "/",
|
||||
component: HomePage,
|
||||
icon: RiHome3Fill,
|
||||
},
|
||||
{
|
||||
name: ADMINISTRATION,
|
||||
path: "administration",
|
||||
component: AdministrationPage,
|
||||
icon: IoMdOptions,
|
||||
children: routesFirstLevel[ADMINISTRATION],
|
||||
},
|
||||
];
|
||||
Loading…
x
Reference in New Issue
Block a user