aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement navigator

Browse Source
This commit is contained in:
Steven
2023-07-27 20:59:21 +08:00
parent fc28473aee
commit 953ec3dbc0
4 changed files with 76 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/pages/Home.tsx
View File

@ -1,4 +1,4 @@
import { Button, Input, Tab, TabList, Tabs } from "@mui/joy";
import { Button, Input } from "@mui/joy";
import { useEffect, useState } from "react";
import { shortcutService } from "../services";
import { useAppSelector } from "../stores";
@ -10,6 +10,7 @@ import ShortcutListView from "../components/ShortcutListView";
import CreateShortcutDialog from "../components/CreateShortcutDialog";
import FilterView from "../components/FilterView";
import OrderSetting from "../components/OrderSetting";
import Navigator from "../components/Navigator";
interface State {
showCreateShortcutDialog: boolean;
@ -23,8 +24,6 @@ const Home: React.FC = () => {
const [state, setState] = useState<State>({
showCreateShortcutDialog: false,
});
const [selectedTab, setSelectedTab] = useState<string>("ALL");
const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
const filter = viewStore.filter;
const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
@ -45,44 +44,31 @@ const Home: React.FC = () => {
return (
<>
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-between items-center mb-4">
<span className="font-mono text-gray-400 mr-2">Shortcuts</span>
<Input
className="w-32"
type="text"
size="sm"
placeholder="Search"
startDecorator={<Icon.Search className="w-4 h-auto" />}
endDecorator={
filter.search && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
}
value={filter.search}
onChange={(e) => viewStore.setFilter({ search: e.target.value })}
/>
</div>
<Navigator />
<div className="w-full flex flex-row justify-between items-center mb-4">
<div className="flex flex-row justify-start items-center">
<span className="font-mono text-gray-400 mr-2">Shortcuts</span>
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
<Icon.Plus className="w-5 h-auto" /> New
<Icon.Plus className="w-5 h-auto" />
</Button>
</div>
<div className="flex flex-row justify-end items-center">
<OrderSetting />
<Tabs
value={filter.mineOnly ? "PRIVATE" : "ALL"}
<Input
className="w-32"
type="text"
size="sm"
onChange={(_, value) => viewStore.setFilter({ mineOnly: value !== "ALL" })}
>
<TabList>
<Tab value={"ALL"}>All</Tab>
<Tab value={"PRIVATE"}>My Own</Tab>
</TabList>
</Tabs>
placeholder="Search"
startDecorator={<Icon.Search className="w-4 h-auto" />}
endDecorator={
filter.search && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
}
value={filter.search}
onChange={(e) => viewStore.setFilter({ search: e.target.value })}
/>
</div>
</div>
<FilterView />
{loadingState.isLoading ? (
<div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
<Icon.Loader className="mr-2 w-5 h-auto animate-spin" />