refactor: mobile UX friendly

src/routes/resources/Filter/index.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 import Tippy from "@tippyjs/react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
 import Avatar from "../../../common/component/Avatar";
 import FilterDate, { Dates } from "./Date";
 import FilterFrom from "./From";
@@ -7,11 +9,9 @@ import FilterChannel from "./Channel";
 import FilterType, { FileTypes } from "./Type";
 import ArrowDown from "../../../assets/icons/arrow.down.svg";
 import { useAppSelector } from "../../../app/store";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
 
 const getClass = (selected: boolean) => {
-  return clsx(`cursor-pointer flex items-center gap-2 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 ');
+  return clsx(`cursor-pointer flex items-center gap-1 md:gap-2 shadow rounded-lg p-1 md:py-2 md:px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 ');
 };
 export default function Filter({ filter, updateFilter }) {
   const { t } = useTranslation("file");
@@ -22,13 +22,13 @@ export default function Filter({ filter, updateFilter }) {
     type: false
   });
 
-  const toggleFilterVisible = (obj) => {
+  const toggleFilterVisible = (obj: any) => {
     setFiltersVisible((prev) => {
       return { ...prev, ...obj };
     });
   };
 
-  const handleUpdateFilter = (data) => {
+  const handleUpdateFilter = (data: any) => {
     updateFilter(data);
     let _key = Object.keys(data)[0];
     let tmp = {

src/routes/resources/Search.tsx

@@ -17,7 +17,7 @@ const Search: FC<Props> = ({ value = "", updateSearchValue = null, embed = false
   };
 
   return (
-    <div className={clsx(`relative w-full py-1.5 px-4 shadow`, embed && "py-2 shadow-none")}>
+    <div className={clsx(`hidden md:block relative w-full py-1.5 px-4 shadow`, embed && "py-2 shadow-none")}>
       <IconSearch className="absolute left-6 top-1/2 -translate-y-1/2" />
       <input value={value} onChange={handleChange} className="bg-black/5 dark:bg-black/20 rounded-full text-sm text-gray-500 py-2.5 pl-9" placeholder={`${t("action.search")}...`} />
     </div>

src/routes/resources/View.tsx

@@ -18,7 +18,7 @@ export default function View({ view = "item" }: Props) {
   };
   const isGrid = view == "grid";
   return (
-    <ul className={`flex border border-solid dark:border-gray-400 shadow rounded-lg box-border`}>
+    <ul className={`hidden md:flex border border-solid dark:border-gray-400 shadow rounded-lg box-border`}>
       <li className={getClass(!isGrid)} data-view={"item"} onClick={handleChangeView}>
         <IconList className={`${!isGrid ? "fill-primary-400" : ""} dark:fill-gray-400`} />
       </li>

src/routes/resources/index.tsx

@@ -82,9 +82,8 @@ function ResourceManagement({ fileMessages }) {
   }, [view, filter]);
 
   return (
-    <div className="h-screen overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-[#384250]">
+    <div className="h-screen md:overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-[#384250]">
       <Search value={filter.name} updateSearchValue={handleUpdateSearch} />
-      <div className="divider"></div>
       <div className="flex justify-between w-full px-4 py-5">
         <Filter filter={filter} updateFilter={updateFilter} />
         <View view={view} />