Implement sort method

hotel-management/src/components/OrderBy.tsx

@@ -0,0 +1,72 @@
+import { useSearchParams } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+const StyledFilter = styled.div`
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 5px;
+  display: flex;
+  gap: 10px;
+`;
+
+interface IFilterBtn {
+  active: boolean;
+}
+
+const FilterButton = styled.button<IFilterBtn>`
+  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);
+  }
+`;
+
+interface IFilterProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+}
+
+function OrderBy({ options }: IFilterProps) {
+  const field = 'orderBy';
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const currentFilter = searchParams.get(field) || options[0].value;
+
+  const handleClick = (value: string) => {
+    searchParams.set(field, value);
+
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <StyledFilter>
+      {options.map((option) => (
+        <FilterButton
+          key={option.value}
+          onClick={() => handleClick(option.value)}
+          active={option.value === currentFilter}
+          disabled={option.value === currentFilter}
+        >
+          {option.label}
+        </FilterButton>
+      ))}
+    </StyledFilter>
+  );
+}
+
+export default OrderBy;

hotel-management/src/components/Select.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+interface ISelect {
+  options: {
+    value: string;
+    label: string;
+  }[];
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+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;
+`;
+
+function Select({ options, value, onChange }: ISelect) {
+  return (
+    <StyledSelect value={value} onChange={onChange}>
+      {options.map((option) => (
+        <option value={option.value} key={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </StyledSelect>
+  );
+}
+
+export default Select;

hotel-management/src/components/SortBy.tsx

@@ -0,0 +1,30 @@
+import { useSearchParams } from 'react-router-dom';
+import Select from './Select';
+
+interface ISortByProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+}
+
+const SortBy = ({ options }: ISortByProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sortBy = searchParams.get('sortBy') || '';
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    searchParams.set('sortBy', event.target.value);
+    setSearchParams(searchParams);
+  };
+
+  // prettier-ignore
+  return (
+    <Select 
+      options={options} 
+      value={sortBy} 
+      onChange={handleChange} 
+    />
+  );
+};
+
+export default SortBy;

hotel-management/src/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode, memo, useContext } from 'react';
 
 // Components
 import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
@@ -19,10 +19,10 @@ const Table = ({ columns, children }: ITable) => {
   );
 };
 
-const Header = ({ children }: ITable) => {
+const Header = memo(({ children }: ITable) => {
   const columns = useContext(TableContext);
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
-};
+});
 
 const Body = <T,>({ data, render }: ITableBody<T>) => {
   return (