chore: more tailwind

src/routes/resources/Search.tsx

@@ -1,31 +1,7 @@
+import clsx from "clsx";
 import { ChangeEvent, FC } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import iconSearch from "../../assets/icons/search.svg?url";
-
-const Styled = styled.div`
-  width: 100%;
-  padding: 6px 16px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  &.embed {
-    padding: 6px 8px;
-    box-shadow: none;
-  }
-  .search {
-    outline: none;
-    background-color: rgba(0, 0, 0, 0.08);
-    border-radius: 25px;
-    padding: 10px 8px 10px 36px;
-    color: #a1a1aa;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    background-image: url(${iconSearch});
-    background-repeat: no-repeat;
-    background-position: 8px center;
-  }
-`;
-
+import IconSearch from "../../assets/icons/search.svg";
 interface Props {
   value?: string;
   updateSearchValue?: (value: string) => void;
@@ -41,9 +17,10 @@ const Search: FC<Props> = ({ value = "", updateSearchValue = null, embed = false
   };
 
   return (
-    <Styled className={embed ? "embed" : ""}>
-      <input value={value} onChange={handleChange} className="search" placeholder={`${t("action.search")}...`} />
-    </Styled>
+    <div className={clsx(`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 rounded-full text-sm text-gray-500 py-2.5 pl-9" placeholder={`${t("action.search")}...`} />
+    </div>
   );
 };
 

src/routes/resources/View.tsx

@@ -2,7 +2,6 @@ import { MouseEvent } from "react";
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { updateFileListView } from "../../app/slices/ui";
-import { Views } from "../../app/config";
 import IconList from "../../assets/icons/file.list.svg";
 import IconGrid from "../../assets/icons/file.grid.svg";
 
@@ -35,20 +34,20 @@ const Styled = styled.ul`
   }
 `;
 
-export default function View({ view = Views.item }) {
+export default function View({ view = "item" }) {
   const dispatch = useDispatch();
   const handleChangeView = (evt: MouseEvent<HTMLLIElement>) => {
     const { view: clickView } = evt.currentTarget.dataset;
     if (clickView == view) return;
-    dispatch(updateFileListView(view == Views.item ? Views.grid : Views.item));
+    dispatch(updateFileListView(view == "item" ? "grid" : "item"));
   };
 
   return (
     <Styled className={view}>
-      <li className="view item" data-view={Views.item} onClick={handleChangeView}>
+      <li className="view item" data-view={"item"} onClick={handleChangeView}>
         <IconList />
       </li>
-      <li className="view grid" data-view={Views.grid} onClick={handleChangeView}>
+      <li className="view grid" data-view={"grid"} onClick={handleChangeView}>
         <IconGrid />
       </li>
     </Styled>

src/routes/resources/index.tsx

@@ -1,13 +1,12 @@
 // @ts-nocheck
 import { useState, useEffect, useRef, memo } from "react";
 import Masonry from "masonry-layout";
-import Styled from "./styled";
-import { Views } from "../../app/config";
 import View from "./View";
 import Search from "./Search";
 import Filter from "./Filter";
 import FileBox from "../../common/component/FileBox";
 import { useAppSelector } from "../../app/store";
+import clsx from "clsx";
 const checkFilter = (data, filter, channelMessage) => {
   let selected = true;
   const { mid, file_type, created_at, from_uid, properties } = data;
@@ -60,7 +59,7 @@ function ResourceManagement({ fileMessages }) {
   };
 
   useEffect(() => {
-    if (view == Views.grid && listContainerRef) {
+    if (view == "grid" && listContainerRef) {
       const container = listContainerRef.current;
       if (!container) return;
       const cWidth = container.getBoundingClientRect().width - 16 * 2;
@@ -72,7 +71,7 @@ function ResourceManagement({ fileMessages }) {
         // options
         fitWidth: true,
         gutter,
-        itemSelector: ".file_box"
+        itemSelector: ".grid-box"
         // columnWidth: 200
       });
     } else {
@@ -83,14 +82,17 @@ function ResourceManagement({ fileMessages }) {
   }, [view, filter]);
 
   return (
-    <Styled>
+    <div className="h-screen overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white">
       <Search value={filter.name} updateSearchValue={handleUpdateSearch} />
       <div className="divider"></div>
-      <div className="opts">
+      <div className="flex justify-between w-full px-4 py-5">
         <Filter filter={filter} updateFilter={updateFilter} />
         <View view={view} />
       </div>
-      <div className={`list ${view}`} ref={listContainerRef}>
+      <div className={clsx(`w-full h-full px-4 overflow-scroll flex`,
+        view == "item" && 'gap-2 flex-col',
+        view == "grid" && "flex-wrap"
+      )} ref={listContainerRef}>
         {fileMessages.map((id) => {
           const data = message[id];
           if (!data) return null;
@@ -99,21 +101,23 @@ function ResourceManagement({ fileMessages }) {
           const { mid, content, created_at, from_uid, properties } = data;
           const { name, content_type, size } = properties ?? {};
           return (
-            <FileBox
-              preview={view == Views.grid}
-              flex={view == Views.item}
-              key={mid}
-              file_type={content_type}
-              content={content}
-              created_at={created_at}
-              from_uid={from_uid}
-              size={size}
-              name={name}
-            />
+            <div key={mid} className="grid-box mb-2">
+              <FileBox
+                preview={view == "grid"}
+                flex={view == "item"}
+                key={mid}
+                file_type={content_type}
+                content={content}
+                created_at={created_at}
+                from_uid={from_uid}
+                size={size}
+                name={name}
+              />
+            </div>
           );
         })}
       </div>
-    </Styled>
+    </div>
   );
 }