diff --git a/hotel-management/src/commons/styles/ButtonIcon.tsx b/hotel-management/src/commons/styles/ButtonIcon.ts similarity index 100% rename from hotel-management/src/commons/styles/ButtonIcon.tsx rename to hotel-management/src/commons/styles/ButtonIcon.ts diff --git a/hotel-management/src/components/AppLayout.tsx b/hotel-management/src/components/AppLayout.tsx deleted file mode 100644 index c34ae29..0000000 --- a/hotel-management/src/components/AppLayout.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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); - - overflow: scroll; -`; - -const AppLayout = () => { - return ( - -
- -
- -
- - ); -}; - -export default AppLayout; diff --git a/hotel-management/src/components/AppLayout/index.tsx b/hotel-management/src/components/AppLayout/index.tsx new file mode 100644 index 0000000..49b39e7 --- /dev/null +++ b/hotel-management/src/components/AppLayout/index.tsx @@ -0,0 +1,22 @@ +import { Outlet } from 'react-router-dom'; + +// Components +import Header from '../Header'; +import Sidebar from '../Sidebar'; + +// Styled +import { Main, StyledAppLayout } from './styled'; + +const AppLayout = () => { + return ( + +
+ +
+ +
+ + ); +}; + +export default AppLayout; diff --git a/hotel-management/src/components/AppLayout/styled.ts b/hotel-management/src/components/AppLayout/styled.ts new file mode 100644 index 0000000..87fbadd --- /dev/null +++ b/hotel-management/src/components/AppLayout/styled.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +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); + + overflow: scroll; +`; + +export { StyledAppLayout, Main }; diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index 0d2de0b..5fe4a93 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -1,3 +1,4 @@ +// Styled import { StyledActionBtn, StyledForm } from './styled'; interface IFormProps { diff --git a/hotel-management/src/components/FormRow/index.tsx b/hotel-management/src/components/FormRow/index.tsx index 3a4a1f5..11b62ae 100644 --- a/hotel-management/src/components/FormRow/index.tsx +++ b/hotel-management/src/components/FormRow/index.tsx @@ -1,3 +1,4 @@ +// Styled import { Error, Label, StyledFormRow } from './styled'; interface IFormRow { diff --git a/hotel-management/src/components/FormRow/styled.ts b/hotel-management/src/components/FormRow/styled.ts index 6563746..d37bbf4 100644 --- a/hotel-management/src/components/FormRow/styled.ts +++ b/hotel-management/src/components/FormRow/styled.ts @@ -16,6 +16,8 @@ const Error = styled.p` color: var(--error-text); font-size: var(--fs-sm-2x); margin-top: 5px; + padding-inline: 5px; + width: 220px; `; export { StyledFormRow, Label, Error }; diff --git a/hotel-management/src/components/Header/index.tsx b/hotel-management/src/components/Header/index.tsx new file mode 100644 index 0000000..2d20917 --- /dev/null +++ b/hotel-management/src/components/Header/index.tsx @@ -0,0 +1,16 @@ +// Components +import HeaderMenu from '../HeaderMenu'; + +// Styled +import { StyledHeader } from './styled'; + +const Header = () => { + return ( + +

Hi, Admin!

+ + + ); +}; + +export default Header; diff --git a/hotel-management/src/components/Header.tsx b/hotel-management/src/components/Header/styled.ts similarity index 53% rename from hotel-management/src/components/Header.tsx rename to hotel-management/src/components/Header/styled.ts index f5f794c..304040e 100644 --- a/hotel-management/src/components/Header.tsx +++ b/hotel-management/src/components/Header/styled.ts @@ -1,8 +1,5 @@ import styled from 'styled-components'; -// Components -import HeaderMenu from './HeaderMenu'; - const StyledHeader = styled.header` border-bottom: 1px solid var(--border-color); padding: 20px 40px; @@ -13,13 +10,4 @@ const StyledHeader = styled.header` gap: 30px; `; -const Header = () => { - return ( - -

Hi, Admin!

- - - ); -}; - -export default Header; +export { StyledHeader }; diff --git a/hotel-management/src/components/HeaderMenu.tsx b/hotel-management/src/components/HeaderMenu/index.tsx similarity index 74% rename from hotel-management/src/components/HeaderMenu.tsx rename to hotel-management/src/components/HeaderMenu/index.tsx index 109666f..3e24e4b 100644 --- a/hotel-management/src/components/HeaderMenu.tsx +++ b/hotel-management/src/components/HeaderMenu/index.tsx @@ -1,14 +1,10 @@ -import styled from 'styled-components'; - // Components import { IoPersonCircleOutline } from 'react-icons/io5'; import { HiOutlineLogout } from 'react-icons/hi'; -import ButtonIcon from '../commons/styles/ButtonIcon'; +import ButtonIcon from '../../commons/styles/ButtonIcon'; -const StyledHeaderMenu = styled.ul` - display: flex; - gap: 10px; -`; +// Styled +import { StyledHeaderMenu } from './styled'; const HeaderMenu = () => { return ( diff --git a/hotel-management/src/components/HeaderMenu/styled.ts b/hotel-management/src/components/HeaderMenu/styled.ts new file mode 100644 index 0000000..9715f1f --- /dev/null +++ b/hotel-management/src/components/HeaderMenu/styled.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const StyledHeaderMenu = styled.ul` + display: flex; + gap: 10px; +`; + +export { StyledHeaderMenu }; diff --git a/hotel-management/src/components/Message/index.tsx b/hotel-management/src/components/Message/index.tsx new file mode 100644 index 0000000..bcc0b4f --- /dev/null +++ b/hotel-management/src/components/Message/index.tsx @@ -0,0 +1,8 @@ +// Styled +import { StyledMessage } from './styled'; + +const Message = ({ children }: { children: string }) => { + return {children}; +}; + +export default Message; diff --git a/hotel-management/src/components/Message.tsx b/hotel-management/src/components/Message/styled.ts similarity index 50% rename from hotel-management/src/components/Message.tsx rename to hotel-management/src/components/Message/styled.ts index 307efb4..10cc192 100644 --- a/hotel-management/src/components/Message.tsx +++ b/hotel-management/src/components/Message/styled.ts @@ -6,8 +6,4 @@ const StyledMessage = styled.p` padding: 20px; `; -const Message = ({ children }: { children: string }) => { - return {children}; -}; - -export default Message; +export { StyledMessage }; diff --git a/hotel-management/src/components/Nav/index.tsx b/hotel-management/src/components/Nav/index.tsx new file mode 100644 index 0000000..4de47fa --- /dev/null +++ b/hotel-management/src/components/Nav/index.tsx @@ -0,0 +1,28 @@ +// Components +import { MdSpaceDashboard } from 'react-icons/md'; +import { HiUsers } from 'react-icons/hi2'; +import { BsHouseDoorFill } from 'react-icons/bs'; + +// Styled +import { StyledNav, StyledNavLink } from './styled'; + +const Nav = () => { + return ( + + + + Dashboard + + + + User + + + + Room + + + ); +}; + +export default Nav; diff --git a/hotel-management/src/components/Nav.tsx b/hotel-management/src/components/Nav/styled.ts similarity index 50% rename from hotel-management/src/components/Nav.tsx rename to hotel-management/src/components/Nav/styled.ts index 5bd3202..52ee29d 100644 --- a/hotel-management/src/components/Nav.tsx +++ b/hotel-management/src/components/Nav/styled.ts @@ -1,11 +1,6 @@ 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'; - const StyledNav = styled.nav` margin-top: 70px; display: flex; @@ -38,23 +33,4 @@ const StyledNavLink = styled(NavLink)` } `; -const Nav = () => { - return ( - - - - Dashboard - - - - User - - - - Room - - - ); -}; - -export default Nav; +export { StyledNav, StyledNavLink }; diff --git a/hotel-management/src/components/OrderBy.tsx b/hotel-management/src/components/OrderBy/index.tsx similarity index 57% rename from hotel-management/src/components/OrderBy.tsx rename to hotel-management/src/components/OrderBy/index.tsx index 57fda8d..e8f0716 100644 --- a/hotel-management/src/components/OrderBy.tsx +++ b/hotel-management/src/components/OrderBy/index.tsx @@ -1,39 +1,8 @@ import { memo } from 'react'; import { useSearchParams } from 'react-router-dom'; -import styled, { css } from 'styled-components'; -const StyledOrder = styled.div` - border: 1px solid var(--border-color); - border-radius: var(--radius-sm); - padding: 5px; - display: flex; - gap: 10px; -`; - -interface IOrderBtn { - active: boolean; -} - -const OrderButton = styled.button` - border: none; - - ${(props) => - props.active && - css` - background-color: var(--primary-color); - color: var(--light-text); - `} - - border-radius: var(--radius-sm); - font-weight: 500; - font-size: var(--fs-sm-x); - padding: 5px 10px; - transition: all 0.3s; - - &:hover:not(:disabled) { - background-color: var(--hover-dark-background-color); - } -`; +// Styled +import { OrderButton, StyledOrder } from './styled'; interface IOrderProps { options: { diff --git a/hotel-management/src/components/OrderBy/styled.ts b/hotel-management/src/components/OrderBy/styled.ts new file mode 100644 index 0000000..ea3325b --- /dev/null +++ b/hotel-management/src/components/OrderBy/styled.ts @@ -0,0 +1,38 @@ +import styled, { css } from 'styled-components'; + +const StyledOrder = styled.div` + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + padding: 5px; + display: flex; + gap: 10px; +`; + +interface IOrderBtn { + active: boolean; +} + +const OrderButton = styled.button` + border: none; + cursor: pointer; + + ${(props) => + props.active && + css` + background-color: var(--primary-color); + color: var(--light-text); + cursor: no-drop; + `} + + border-radius: var(--radius-sm); + font-weight: 500; + font-size: var(--fs-sm-x); + padding: 5px 10px; + transition: all 0.3s; + + &:hover:not(:disabled) { + background-color: var(--hover-dark-background-color); + } +`; + +export { StyledOrder, OrderButton }; diff --git a/hotel-management/src/components/Search.tsx b/hotel-management/src/components/Search/index.tsx similarity index 74% rename from hotel-management/src/components/Search.tsx rename to hotel-management/src/components/Search/index.tsx index 03b839d..544a832 100644 --- a/hotel-management/src/components/Search.tsx +++ b/hotel-management/src/components/Search/index.tsx @@ -1,12 +1,5 @@ import { memo, useEffect, useState } from 'react'; -import styled from 'styled-components'; - -const StyledSearch = styled.input` - border-radius: var(--radius-sm); - border: 1px solid var(--border-color); - font-size: var(--fs-sm-x); - padding: 5px 10px; -`; +import { StyledSearch } from './styled'; interface ISearch { setPlaceHolder: string; diff --git a/hotel-management/src/components/Search/styled.ts b/hotel-management/src/components/Search/styled.ts new file mode 100644 index 0000000..cf468b2 --- /dev/null +++ b/hotel-management/src/components/Search/styled.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +const StyledSearch = styled.input` + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + font-size: var(--fs-sm-x); + padding: 5px 10px; +`; + +export { StyledSearch }; diff --git a/hotel-management/src/components/Select.tsx b/hotel-management/src/components/Select.tsx deleted file mode 100644 index ede854c..0000000 --- a/hotel-management/src/components/Select.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import styled from 'styled-components'; - -interface ISelect { - options: { - value: string; - label: string; - }[]; - value: string; - onChange: React.ChangeEventHandler; -} - -const StyledSelect = styled.select` - font-size: var(--fs-sm-x); - padding: 5px 10px; - border: 1px solid var(--border-color); - border-radius: var(--radius-sm); - font-weight: 500; -`; - -const Select = ({ options, value, onChange }: ISelect) => { - return ( - - {options.map((option) => ( - - ))} - - ); -}; - -export default Select; diff --git a/hotel-management/src/components/Select/index.tsx b/hotel-management/src/components/Select/index.tsx new file mode 100644 index 0000000..448c2be --- /dev/null +++ b/hotel-management/src/components/Select/index.tsx @@ -0,0 +1,30 @@ +import { ISelectOptions } from '../../globals/interfaces'; +import { StyledSelect } from './styled'; + +interface ISelect { + options: ISelectOptions[]; + value: string; + onChange: React.ChangeEventHandler; + name?: string; +} + +const Select = ({ options, value, onChange, name }: ISelect) => { + if (!options) return; + + return ( + + {options.map((option) => ( + + ))} + + ); +}; + +export default Select; diff --git a/hotel-management/src/components/Select/styled.ts b/hotel-management/src/components/Select/styled.ts new file mode 100644 index 0000000..93b089c --- /dev/null +++ b/hotel-management/src/components/Select/styled.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +const StyledSelect = styled.select` + font-size: var(--fs-sm-x); + padding: 5px 10px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + font-weight: 500; +`; + +export { StyledSelect }; diff --git a/hotel-management/src/components/Sidebar/index.tsx b/hotel-management/src/components/Sidebar/index.tsx new file mode 100644 index 0000000..3b0c4d2 --- /dev/null +++ b/hotel-management/src/components/Sidebar/index.tsx @@ -0,0 +1,16 @@ +// Components +import Nav from '../Nav'; + +// Styled +import { Heading, StyledSidebar } from './styled'; + +const Sidebar = () => { + return ( + + Hotel Management +