nezumi/react-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/react-training.git synced 2026-09-22 20:01:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor code

Browse Source
This commit is contained in:
nezumi
2023-10-24 11:12:56 +07:00
parent 3ea873ff25
commit 2b2ed6765f
9 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/index.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Hotel Management" />
<title>Hotel Management</title>
</head>
<body>
hotel-management/src/App.tsx
+28 -12
View File
@@ -1,7 +1,9 @@
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import isPropValid from '@emotion/is-prop-valid';
import { StyleSheetManager } from 'styled-components';
// Components
import AppLayout from './ui/AppLayout';
import AppLayout from './components/AppLayout';
import User from './pages/User';
import Dashboard from './pages/Dashboard';
import Room from './pages/Room';
@@ -13,19 +15,33 @@ import * as PATH from './constants/path';
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route element={<AppLayout />}>
<Route index element={<Navigate replace to={PATH.USER} />} />
<Route path={PATH.DASHBOARD} element={<Dashboard />} />
<Route path={PATH.USER} element={<User />} />
<Route path={PATH.ROOM} element={<Room />} />
</Route>
<Route path={PATH.OTHER_PATH} element={<NotFound />} />
</Routes>
</BrowserRouter>
<StyleSheetManager shouldForwardProp={shouldForwardProp}>
<BrowserRouter>
<Routes>
<Route element={<AppLayout />}>
<Route index element={<Navigate replace to={PATH.USER} />} />
<Route path={PATH.DASHBOARD} element={<Dashboard />} />
<Route path={PATH.USER} element={<User />} />
<Route path={PATH.ROOM} element={<Room />} />
</Route>
<Route path={PATH.OTHER_PATH} element={<NotFound />} />
</Routes>
</BrowserRouter>
</StyleSheetManager>
</>
);
}
// Fix the error 'React does not recognize the "someProp" prop on a DOM element'. Link ref: https://github.com/orgs/styled-components/discussions/4136
// This implements the default behavior from styled-components v5
function shouldForwardProp(propName: string, target: unknown) {
if (typeof target === 'string') {
// For HTML elements, forward the prop if it is a valid HTML attribute
return isPropValid(propName);
}
// For other elements, forward all props
return true;
}
export default App;
hotel-management/src/ui/ButtonIcon.tsx → hotel-management/src/commons/styles/ButtonIcon.ts
+1 -1
View File
@@ -5,7 +5,7 @@ const ButtonIcon = styled.button`
border: none;
padding: 8px;
transition: all 0.2s;
border-radius: var(--radius-sm);
border-radius: var(--radius-md);
&:hover {
background-color: var(--hover-background-color);
hotel-management/src/ui/AppLayout.tsx → hotel-management/src/components/AppLayout.tsx
+2
View File
@@ -14,6 +14,8 @@ const StyledAppLayout = styled.div`
const Main = styled.main`
border: 1px solid var(--border-color);
overflow: scroll;
`;
const AppLayout = () => {
hotel-management/src/ui/Header.tsx → hotel-management/src/components/Header.tsx
View File
hotel-management/src/ui/HeaderMenu.tsx → hotel-management/src/components/HeaderMenu.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import styled from 'styled-components';
import { IoPersonCircleOutline } from 'react-icons/io5';
import { HiOutlineLogout } from 'react-icons/hi';
// Components
import ButtonIcon from './ButtonIcon';
import { IoPersonCircleOutline } from 'react-icons/io5';
import { HiOutlineLogout } from 'react-icons/hi';
import ButtonIcon from '../commons/styles/ButtonIcon';
const StyledHeaderMenu = styled.ul`
display: flex;
hotel-management/src/ui/Nav.tsx → hotel-management/src/components/Nav.tsx
+3 -1
View File
@@ -1,5 +1,7 @@
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
// Components
import { MdSpaceDashboard } from 'react-icons/md';
import { HiUsers } from 'react-icons/hi2';
import { BsHouseDoorFill } from 'react-icons/bs';
@@ -16,7 +18,7 @@ const StyledNavLink = styled(NavLink)`
align-items: center;
gap: 20px;
padding: 15px;
border-radius: var(--radius-sm);
border-radius: var(--radius-md);
transition: all 0.3s;
& svg {
hotel-management/src/ui/Sidebar.tsx → hotel-management/src/components/Sidebar.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const StyledSidebar = styled.aside`
`;
const Heading = styled.h1`
font-size: 30px;
font-size: var(--fs-md);
text-transform: uppercase;
text-align: center;
color: var(--primary-color);
hotel-management/src/styles/abstracts/variables.css
+12 -1
View File
@@ -1,7 +1,18 @@
:root {
--primary-color: #0010ba;
--header-table-color: #ebebeb;
--border-color: #8c8c8c;
--radius-sm: 10px;
--hover-background-color: #f3f4f6;
--light-text: #fff;
--dark-text: #787878;
--radius-sm: 5px;
--radius-md: 10px;
--shadow-sm: 0px 10px 20px rgba(0, 0, 0, 0.2);
--fs-md: 30px;
--fs-lg: 40px;
--fs-sm: 18px;
--fs-sm-x: 16px;
}