diff --git a/hotel-management/index.html b/hotel-management/index.html index e4b78ea..21cea33 100644 --- a/hotel-management/index.html +++ b/hotel-management/index.html @@ -1,10 +1,10 @@ - + - Vite + React + TS + Hotel Management
diff --git a/hotel-management/src/App.tsx b/hotel-management/src/App.tsx index 5bfd75d..73442b3 100644 --- a/hotel-management/src/App.tsx +++ b/hotel-management/src/App.tsx @@ -1,9 +1,29 @@ -import Header from './ui/Header'; +import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; + +// Components +import AppLayout from './ui/AppLayout'; +import User from './pages/User'; +import Dashboard from './pages/Dashboard'; +import Room from './pages/Room'; +import NotFound from './pages/NotFound'; + +// Constants +import * as PATH from './constants/path'; function App() { return ( <> -
+ + + }> + } /> + } /> + } /> + } /> + + } /> + + ); } diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts new file mode 100644 index 0000000..98c28d3 --- /dev/null +++ b/hotel-management/src/constants/path.ts @@ -0,0 +1,4 @@ +export const DASHBOARD: string = '/dashboard'; +export const USER: string = '/user'; +export const ROOM: string = '/room'; +export const OTHER_PATH: string = '*'; diff --git a/hotel-management/src/pages/Dashboard.tsx b/hotel-management/src/pages/Dashboard.tsx new file mode 100644 index 0000000..46e053e --- /dev/null +++ b/hotel-management/src/pages/Dashboard.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +const StyledDashboard = styled.main` + padding: 20px; +`; + +const Dashboard = () => { + return ( + +

This page currently still develop. Please try again later!

+ + ); +}; + +export default Dashboard; diff --git a/hotel-management/src/pages/NotFound.tsx b/hotel-management/src/pages/NotFound.tsx new file mode 100644 index 0000000..f362a42 --- /dev/null +++ b/hotel-management/src/pages/NotFound.tsx @@ -0,0 +1,46 @@ +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; + +const StyledNotFound = styled.div` + height: 100vh; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; +`; + +const Heading = styled.h1` + font-size: 40px; + color: var(--primary-color); +`; + +const Button = styled.button` + padding: 10px 20px; + + background-color: var(--primary-color); + color: var(--light-text); + text-transform: uppercase; + font-weight: 500; + + border-radius: var(--radius-sm); +`; + +const useMoveBack = () => { + const navigate = useNavigate(); + return () => navigate(-1); +}; + +const NotFound = () => { + const onBack = useMoveBack(); + + return ( + + The page not found! + + + ); +}; + +export default NotFound; diff --git a/hotel-management/src/pages/Room.tsx b/hotel-management/src/pages/Room.tsx new file mode 100644 index 0000000..a7185f5 --- /dev/null +++ b/hotel-management/src/pages/Room.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +const StyledRoom = styled.main` + padding: 20px; +`; + +const Room = () => { + return ( + +

Room page

+ + ); +}; + +export default Room; diff --git a/hotel-management/src/pages/User.tsx b/hotel-management/src/pages/User.tsx new file mode 100644 index 0000000..6d85050 --- /dev/null +++ b/hotel-management/src/pages/User.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +const StyledUser = styled.main` + padding: 20px; +`; + +const User = () => { + return ( + +

User page

+ + ); +}; + +export default User; diff --git a/hotel-management/src/styles/abstracts/variables.css b/hotel-management/src/styles/abstracts/variables.css index 9dea583..48effd4 100644 --- a/hotel-management/src/styles/abstracts/variables.css +++ b/hotel-management/src/styles/abstracts/variables.css @@ -1,4 +1,7 @@ :root { + --primary-color: #0010ba; --border-color: #8c8c8c; --radius-sm: 10px; + --hover-background-color: #f3f4f6; + --light-text: #fff; } diff --git a/hotel-management/src/styles/bases/common.css b/hotel-management/src/styles/bases/common.css index 1e8e0fd..1dc15ec 100644 --- a/hotel-management/src/styles/bases/common.css +++ b/hotel-management/src/styles/bases/common.css @@ -3,3 +3,8 @@ button:has(svg) { cursor: pointer; } + +a { + color: inherit; + text-decoration: none; +} diff --git a/hotel-management/src/ui/AppLayout.tsx b/hotel-management/src/ui/AppLayout.tsx new file mode 100644 index 0000000..85e3c80 --- /dev/null +++ b/hotel-management/src/ui/AppLayout.tsx @@ -0,0 +1,31 @@ +import styled from 'styled-components'; +import { Outlet } from 'react-router-dom'; + +// Components +import Header from './Header'; +import Sidebar from './Sidebar'; + +const StyledAppLayout = styled.div` + display: grid; + grid-template-columns: 300px 1fr; + grid-template-rows: auto 1fr; + height: 100vh; +`; + +const Main = styled.main` + border: 1px solid var(--border-color); +`; + +const AppLayout = () => { + return ( + +
+ +
+ +
+ + ); +}; + +export default AppLayout; diff --git a/hotel-management/src/ui/ButtonIcon.tsx b/hotel-management/src/ui/ButtonIcon.tsx index 33912ce..5c9f2b8 100644 --- a/hotel-management/src/ui/ButtonIcon.tsx +++ b/hotel-management/src/ui/ButtonIcon.tsx @@ -8,7 +8,7 @@ const ButtonIcon = styled.button` border-radius: var(--radius-sm); &:hover { - background-color: #f3f4f6; + background-color: var(--hover-background-color); } & svg { diff --git a/hotel-management/src/ui/Header.tsx b/hotel-management/src/ui/Header.tsx index 271827c..f5f794c 100644 --- a/hotel-management/src/ui/Header.tsx +++ b/hotel-management/src/ui/Header.tsx @@ -1,4 +1,6 @@ import styled from 'styled-components'; + +// Components import HeaderMenu from './HeaderMenu'; const StyledHeader = styled.header` diff --git a/hotel-management/src/ui/HeaderMenu.tsx b/hotel-management/src/ui/HeaderMenu.tsx index d9615ba..8c2efc3 100644 --- a/hotel-management/src/ui/HeaderMenu.tsx +++ b/hotel-management/src/ui/HeaderMenu.tsx @@ -1,8 +1,10 @@ import styled from 'styled-components'; -import ButtonIcon from './ButtonIcon'; import { IoPersonCircleOutline } from 'react-icons/io5'; import { HiOutlineLogout } from 'react-icons/hi'; +// Components +import ButtonIcon from './ButtonIcon'; + const StyledHeaderMenu = styled.ul` display: flex; gap: 10px; diff --git a/hotel-management/src/ui/Nav.tsx b/hotel-management/src/ui/Nav.tsx new file mode 100644 index 0000000..818ac9c --- /dev/null +++ b/hotel-management/src/ui/Nav.tsx @@ -0,0 +1,58 @@ +import { NavLink } from 'react-router-dom'; +import styled from 'styled-components'; +import { MdSpaceDashboard } from 'react-icons/md'; +import { HiUsers } from 'react-icons/hi2'; +import { BsHouseDoorFill } from 'react-icons/bs'; + +const StyledNav = styled.nav` + margin-top: 70px; + display: flex; + flex-direction: column; + gap: 15px; +`; + +const StyledNavLink = styled(NavLink)` + display: flex; + align-items: center; + gap: 20px; + padding: 15px; + border-radius: var(--radius-sm); + transition: all 0.3s; + + & svg { + width: 25px; + height: 25px; + transition: all 0.3s; + } + + &:hover, + &.active { + background-color: var(--hover-background-color); + } + + &:hover svg, + &.active svg { + color: var(--primary-color); + } +`; + +const Nav = () => { + return ( + + + + Dashboard + + + + User + + + + Room + + + ); +}; + +export default Nav; diff --git a/hotel-management/src/ui/Sidebar.tsx b/hotel-management/src/ui/Sidebar.tsx new file mode 100644 index 0000000..518a9f9 --- /dev/null +++ b/hotel-management/src/ui/Sidebar.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components'; + +// Components +import Nav from './Nav'; + +const StyledSidebar = styled.aside` + padding: 50px 20px; + + grid-row: 1 / 3; + border: 1px solid var(--border-color); +`; + +const Heading = styled.h1` + font-size: 30px; + text-transform: uppercase; + text-align: center; + color: var(--primary-color); +`; + +const Sidebar = () => { + return ( + + Hotel Management +