pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add layout and hook

Browse source
This commit is contained in:
Kenta420 2024-01-16 18:08:55 +07:00
parent c49eee8fea
commit 21109e4bf9
8 changed files with 161 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

68
client-electron/package-lock.json generated
View file

@ -10,7 +10,8 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
"react-router-dom": "^6.21.1",
"zustand": "^4.4.7"
},
"devDependencies": {
"@electron-forge/cli": "^7.2.0",
@ -3010,13 +3011,13 @@
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
"dev": true
"devOptional": true
},
"node_modules/@types/react": {
"version": "18.2.47",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.47.tgz",
"integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -3045,7 +3046,7 @@
"version": "0.16.8",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
"dev": true
"devOptional": true
},
"node_modules/@types/semver": {
"version": "7.5.6",
@ -4646,7 +4647,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true
"devOptional": true
},
"node_modules/culori": {
"version": "3.3.0",
@ -10342,6 +10343,14 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/username": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/username/-/username-5.1.0.tgz",
@ -10788,6 +10797,33 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zustand": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
"integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==",
"dependencies": {
"use-sync-external-store": "1.2.0"
},
"engines": {
"node": ">=12.7.0"
},
"peerDependencies": {
"@types/react": ">=16.8",
"immer": ">=9.0",
"react": ">=16.8"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
}
}
}
},
"dependencies": {
@ -12929,13 +12965,13 @@
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
"dev": true
"devOptional": true
},
"@types/react": {
"version": "18.2.47",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.47.tgz",
"integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
"dev": true,
"devOptional": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -12964,7 +13000,7 @@
"version": "0.16.8",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
"dev": true
"devOptional": true
},
"@types/semver": {
"version": "7.5.6",
@ -14094,7 +14130,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true
"devOptional": true
},
"culori": {
"version": "3.3.0",
@ -18344,6 +18380,12 @@
"punycode": "^2.1.0"
}
},
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"requires": {}
},
"username": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/username/-/username-5.1.0.tgz",
@ -18657,6 +18699,14 @@
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
"dev": true
},
"zustand": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
"integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==",
"requires": {
"use-sync-external-store": "1.2.0"
}
}
}
}

5
client-electron/package.json
View file

@ -15,7 +15,8 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
"react-router-dom": "^6.21.1",
"zustand": "^4.4.7"
},
"devDependencies": {
"@electron-forge/cli": "^7.2.0",
@ -42,4 +43,4 @@
"vite-plugin-electron-renderer": "^0.14.5"
},
"main": "dist-electron/main.js"
}
}

59
client-electron/src/App.tsx
View file

@ -1,19 +1,52 @@
import { HashRouter, Route, Routes } from 'react-router-dom'
import Home from './pages/Home'
import {
createBrowserRouter,
createHashRouter,
RouterProvider,
type RouteObject
} from 'react-router-dom'
import AuthCallBack from './AuthCallBack'
import MainLayout from './layouts/MainLayout'
import Home from './pages/Home'
function router() {
const routes: RouteObject[] = [
{
path: '/',
element: (
<MainLayout>
<Home />
</MainLayout>
),
children: [
{
path: 'recipes',
element: <div>Recipes</div>
}
]
},
{
path: '/auth/callback',
element: <AuthCallBack />
},
{
path: '*',
element: (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-3xl font-bold text-gray-900">404</h1>
<p className="text-gray-500">Page Not Found</p>
</div>
)
}
]
if (import.meta.env.MODE == 'electron') {
return createHashRouter(routes)
}
return createBrowserRouter(routes)
}
const App: React.FC = () => {
return (
<HashRouter>
<header>{/* header here */}</header>
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/callback" element={<AuthCallBack />} />
</Routes>
</main>
</HashRouter>
)
return <RouterProvider router={router()} />
}
export default App

9
client-electron/src/components/Header.tsx Normal file
View file

@ -0,0 +1,9 @@
const Header: React.FC = () => {
return (
<header className="fixed bg-black w-full z-0 px-4 shadow-sm shadow-slate-500/40 pl-[20rem]">
<h2>Header</h2>
</header>
)
}
export default Header

9
client-electron/src/components/Sidebar.tsx Normal file
View file

@ -0,0 +1,9 @@
const Sidebar: React.FC = () => {
return (
<aside className="fixed bg-black text-gray-500 z-50 h-full shadow-lg shadow-gray-900/20 transition duration-300 ease-in-out w-[20rem]">
<h2>Sidebar</h2>
</aside>
)
}
export default Sidebar

14
client-electron/src/hooks/userAuth.ts Normal file
View file

@ -0,0 +1,14 @@
import { create } from 'zustand'
interface UserAuth {
username: string | undefined
email: string | undefined
}
const userAuthStore = create<UserAuth>(() => ({
username: undefined,
email: undefined
}))
export const getUserName = userAuthStore(state => state.username)
export const getUserEmail = userAuthStore(state => state.email)

8
client-electron/src/index.css
View file

@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
* {
min-width: 0px;
top: 0px;
left: 0px;
}

14
client-electron/src/layouts/MainLayout.tsx Normal file
View file

@ -0,0 +1,14 @@
import Header from '../components/Header'
import Sidebar from '../components/Sidebar'
const MainLayout = ({ children }: React.PropsWithChildren) => {
return (
<div>
<Sidebar />
<Header />
<main className="fixed pt-14 px-4 pl-[21rem]">{children}</main>
</div>
)
}
export default MainLayout