From 50931b32524e45d4cf2b13d8b7fc22cd3e7d6450 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 18 Oct 2023 11:44:41 +0700 Subject: [PATCH 1/2] Add sidebar component --- hotel-management/index.html | 4 +- hotel-management/src/App.tsx | 19 +++++- hotel-management/src/pages/Dashboard.tsx | 15 +++++ hotel-management/src/pages/NotFound.tsx | 46 +++++++++++++++ hotel-management/src/pages/Room.tsx | 15 +++++ hotel-management/src/pages/User.tsx | 15 +++++ .../src/styles/abstracts/variables.css | 3 + hotel-management/src/styles/bases/common.css | 5 ++ hotel-management/src/ui/AppLayout.tsx | 29 ++++++++++ hotel-management/src/ui/ButtonIcon.tsx | 2 +- hotel-management/src/ui/Nav.tsx | 58 +++++++++++++++++++ hotel-management/src/ui/Sidebar.tsx | 27 +++++++++ 12 files changed, 233 insertions(+), 5 deletions(-) create mode 100644 hotel-management/src/pages/Dashboard.tsx create mode 100644 hotel-management/src/pages/NotFound.tsx create mode 100644 hotel-management/src/pages/Room.tsx create mode 100644 hotel-management/src/pages/User.tsx create mode 100644 hotel-management/src/ui/AppLayout.tsx create mode 100644 hotel-management/src/ui/Nav.tsx create mode 100644 hotel-management/src/ui/Sidebar.tsx 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..4c4e178 100644 --- a/hotel-management/src/App.tsx +++ b/hotel-management/src/App.tsx @@ -1,9 +1,24 @@ -import Header from './ui/Header'; +import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; +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'; function App() { return ( <> -
+ + + }> + } /> + } /> + } /> + } /> + + } /> + + ); } 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..f5ed854 --- /dev/null +++ b/hotel-management/src/ui/AppLayout.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components'; +import Header from './Header'; +import Sidebar from './Sidebar'; +import { Outlet } from 'react-router-dom'; + +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/Nav.tsx b/hotel-management/src/ui/Nav.tsx new file mode 100644 index 0000000..40cbf8d --- /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.div` + 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..1ee16eb --- /dev/null +++ b/hotel-management/src/ui/Sidebar.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-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 +