aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-09-06 01:04:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update navigator style

Browse Source
This commit is contained in:
Steven
2023-07-27 23:42:12 +08:00
parent 49cc1e9755
commit de51e1a8d3
3 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/Navigator.tsx
View File

@@ -1,5 +1,5 @@
import classNames from "classnames";
import { uniq } from "lodash-es";
import { Button } from "@mui/joy";
import { useAppSelector } from "../stores";
import useViewStore from "../stores/v1/view";
import Icon from "./Icon";
@@ -12,36 +12,39 @@ const Navigator = () => {
const sortedTagMap = sortTags(tags);
return (
<div className="w-full flex flex-row justify-start items-center gap-1 flex-wrap mb-4">
<Button
variant={currentTab === "tab:all" ? "solid" : "plain"}
color="neutral"
size="sm"
<div className="w-full flex flex-row justify-start items-center mb-4 gap-1 sm:flex-wrap overflow-x-auto no-scrollbar">
<button
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === "tab:all" ? "!bg-gray-600 text-white shadow" : ""
)}
onClick={() => viewStore.setFilter({ tab: "tab:all" })}
>
<Icon.CircleSlash className="w-4 h-auto mr-1" />
<span className="font-normal">All</span>
</Button>
<Button
variant={currentTab === "tab:mine" ? "solid" : "plain"}
color="neutral"
size="sm"
</button>
<button
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === "tab:mine" ? "!bg-gray-600 text-white shadow" : ""
)}
onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
>
<Icon.User className="w-4 h-auto mr-1" />
<span className="font-normal">Mine</span>
</Button>
</button>
{Array.from(sortedTagMap.keys()).map((tag) => (
<Button
<button
key={tag}
variant={currentTab === `tag:${tag}` ? "solid" : "plain"}
color="neutral"
size="sm"
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
currentTab === `tag:${tag}` ? "!bg-gray-600 text-white shadow" : ""
)}
onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
>
<Icon.Hash className="w-4 h-auto mr-1" />
<span className="max-w-[8rem] truncate font-normal">{tag}</span>
</Button>
</button>
))}
</div>
);