From 3bbd8c61e37553344fdf61ac3ca992d776e5fc56 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 23 Nov 2023 21:19:36 +0700 Subject: [PATCH] Format code style --- .../src/components/ButtonIcon/index.tsx | 89 +----------------- .../src/components/ButtonIcon/styled.ts | 90 +++++++++++++++++++ .../src/components/Menus/index.tsx | 4 +- .../src/components/Search/index.tsx | 4 +- .../src/contexts/UserRoomAvailableContext.ts | 4 +- .../src/services/supabaseService.ts | 2 + 6 files changed, 102 insertions(+), 91 deletions(-) diff --git a/hotel-management/src/components/ButtonIcon/index.tsx b/hotel-management/src/components/ButtonIcon/index.tsx index 8375518..dff27b0 100644 --- a/hotel-management/src/components/ButtonIcon/index.tsx +++ b/hotel-management/src/components/ButtonIcon/index.tsx @@ -1,92 +1,5 @@ -import { COLOR, SIZE } from '@constant/styles'; import { ReactNode } from 'react'; -import styled, { css } from 'styled-components'; - -interface IStyledButtonIcon { - isHaveChildren: boolean; - style?: { - fontSize?: string; - backgroundColor?: string; - color?: string; - }; - iconStyle?: { - color?: string; - size?: string; - }; -} - -const StyledButtonIcon = styled.button` - background: none; - - padding: 10px; - transition: all 0.2s; - - border: none; - - ${(props) => - props.style?.fontSize && - css` - font-size: ${props.style.fontSize}; - `} - - ${(props) => - props.style?.fontSize && - css` - font-size: ${props.style.fontSize}; - `} - - ${(props) => - props.color && - css` - font-size: ${props.color}; - `} - - ${(props) => - props.isHaveChildren - ? css` - display: flex; - align-items: center; - gap: 10px; - - text-align: left; - width: 100%; - ` - : css` - border-radius: var(--radius-md); - `} - - &:hover { - background-color: var(--hover-background-color); - } - - & svg { - ${(props) => - props.iconStyle?.size && - css` - width: ${props.iconStyle.size}; - height: ${props.iconStyle.size}; - `} - - ${(props) => - props.iconStyle?.color && - css` - color: ${props.iconStyle.color}; - `} - transition: all 0.3s; - } -`; - -StyledButtonIcon.defaultProps = { - style: { - fontSize: SIZE.DEFAULT, - backgroundColor: COLOR.DEFAULT, - color: COLOR.BLACK, - }, - iconStyle: { - color: COLOR.BLACK, - size: SIZE.DEFAULT, - }, -}; +import { StyledButtonIcon } from './styled'; interface IButtonIcon { icon: ReactNode; diff --git a/hotel-management/src/components/ButtonIcon/styled.ts b/hotel-management/src/components/ButtonIcon/styled.ts index e69de29..26d978d 100644 --- a/hotel-management/src/components/ButtonIcon/styled.ts +++ b/hotel-management/src/components/ButtonIcon/styled.ts @@ -0,0 +1,90 @@ +import styled, { css } from 'styled-components'; +import { COLOR, SIZE } from '@constant/styles'; + +interface IStyledButtonIcon { + isHaveChildren: boolean; + style?: { + fontSize?: string; + backgroundColor?: string; + color?: string; + }; + iconStyle?: { + color?: string; + size?: string; + }; +} + +const StyledButtonIcon = styled.button` + background: none; + + padding: 10px; + transition: all 0.2s; + + border: none; + + ${(props) => + props.style?.fontSize && + css` + font-size: ${props.style.fontSize}; + `} + + ${(props) => + props.style?.fontSize && + css` + font-size: ${props.style.fontSize}; + `} + + ${(props) => + props.color && + css` + font-size: ${props.color}; + `} + + ${(props) => + props.isHaveChildren + ? css` + display: flex; + align-items: center; + gap: 10px; + + text-align: left; + width: 100%; + ` + : css` + border-radius: var(--radius-md); + `} + + &:hover { + background-color: var(--hover-background-color); + } + + & svg { + ${(props) => + props.iconStyle?.size && + css` + width: ${props.iconStyle.size}; + height: ${props.iconStyle.size}; + `} + + ${(props) => + props.iconStyle?.color && + css` + color: ${props.iconStyle.color}; + `} + transition: all 0.3s; + } +`; + +StyledButtonIcon.defaultProps = { + style: { + fontSize: SIZE.DEFAULT, + backgroundColor: COLOR.DEFAULT, + color: COLOR.BLACK, + }, + iconStyle: { + color: COLOR.BLACK, + size: SIZE.DEFAULT, + }, +}; + +export { StyledButtonIcon }; diff --git a/hotel-management/src/components/Menus/index.tsx b/hotel-management/src/components/Menus/index.tsx index 58f36b7..5ed7a41 100644 --- a/hotel-management/src/components/Menus/index.tsx +++ b/hotel-management/src/components/Menus/index.tsx @@ -5,6 +5,7 @@ import { HiEllipsisVertical } from 'react-icons/hi2'; // Hooks import { useOutsideClick } from '@hook/useOutsideClick'; +import ButtonIcon from '@component/ButtonIcon'; // Styled import { StyledMenu, StyledList, StyledToggle } from './styled'; @@ -14,7 +15,8 @@ import MenusContext from '@context/MenuContext'; // Types import { Nullable } from '@type/common'; -import ButtonIcon from '@component/ButtonIcon'; + +// Constants import { COLOR } from '@constant/styles'; interface IButton { diff --git a/hotel-management/src/components/Search/index.tsx b/hotel-management/src/components/Search/index.tsx index 887ce30..fcd8bb6 100644 --- a/hotel-management/src/components/Search/index.tsx +++ b/hotel-management/src/components/Search/index.tsx @@ -1,11 +1,13 @@ import { useEffect, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; // Styled import { StyledSearch } from './styled'; // Hooks import { useDebounce } from '@hook/useDebounce'; -import { useSearchParams } from 'react-router-dom'; + +// Types import { Nullable } from '@type/common'; interface ISearch { diff --git a/hotel-management/src/contexts/UserRoomAvailableContext.ts b/hotel-management/src/contexts/UserRoomAvailableContext.ts index 01c91ce..17371d3 100644 --- a/hotel-management/src/contexts/UserRoomAvailableContext.ts +++ b/hotel-management/src/contexts/UserRoomAvailableContext.ts @@ -1,6 +1,8 @@ -import { IDataState } from '@type/common'; import { Dispatch, createContext } from 'react'; +// Types +import { IDataState } from '@type/common'; + interface IUserRoomState { usersAvailable: IDataState[]; roomsAvailable: IDataState[]; diff --git a/hotel-management/src/services/supabaseService.ts b/hotel-management/src/services/supabaseService.ts index b7e9fcb..27b485a 100644 --- a/hotel-management/src/services/supabaseService.ts +++ b/hotel-management/src/services/supabaseService.ts @@ -1,4 +1,6 @@ import { createClient } from '@supabase/supabase-js'; + +// Types import { Database } from '@type/supabase'; // Constants