feat: darkmode draft version

src/routes/resources/View.tsx

@@ -1,55 +1,30 @@
 import { MouseEvent } from "react";
-import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { updateFileListView } from "../../app/slices/ui";
 import IconList from "../../assets/icons/file.list.svg";
 import IconGrid from "../../assets/icons/file.grid.svg";
+import clsx from "clsx";
 
-const Styled = styled.ul`
-  display: flex;
-  border: 1px solid #d0d5dd;
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
-  box-sizing: border-box;
-
-  .view {
-    cursor: pointer;
-    padding: 8px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &.item .item,
-  &.grid .grid {
-    border: 1px solid #52edff;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-    svg {
-      transition: all 0.2s ease;
-      path {
-        fill: #52edff;
-      }
-    }
-  }
-`;
-
-export default function View({ view = "item" }) {
+const getClass = (selected: boolean) => clsx(`cursor-pointer p-2 box-border flex-center`, selected && `border border-solid border-primary-400 shadow rounded-lg`);
+type Props = {
+  view?: "item" | "grid"
+}
+export default function View({ view = "item" }: Props) {
   const dispatch = useDispatch();
   const handleChangeView = (evt: MouseEvent<HTMLLIElement>) => {
     const { view: clickView } = evt.currentTarget.dataset;
     if (clickView == view) return;
     dispatch(updateFileListView(view == "item" ? "grid" : "item"));
   };
-
+  const isGrid = view == "grid";
   return (
-    <Styled className={view}>
-      <li className="view item" data-view={"item"} onClick={handleChangeView}>
-        <IconList />
+    <ul className={`flex border border-solid shadow rounded-lg box-border`}>
+      <li className={getClass(!isGrid)} data-view={"item"} onClick={handleChangeView}>
+        <IconList className={`${!isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
       </li>
-      <li className="view grid" data-view={"grid"} onClick={handleChangeView}>
-        <IconGrid />
+      <li className={getClass(isGrid)} data-view={"grid"} onClick={handleChangeView}>
+        <IconGrid className={`${isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
       </li>
-    </Styled>
+    </ul>
   );
 }