reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve column management

Browse Source
This commit is contained in:
reya
2024-03-22 11:28:54 +07:00
parent dd7155a3a6
commit ec0f3fabc0
18 changed files with 194 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop2/src/routes/store.tsx
+46 -32
View File
@@ -1,48 +1,62 @@
import { GlobalIcon, LaurelIcon } from "@lume/icons";
import { CancelIcon, GlobalIcon, LaurelIcon } from "@lume/icons";
import { Column } from "@lume/ui";
import { cn } from "@lume/utils";
import { Link } from "@tanstack/react-router";
import { Outlet, createFileRoute } from "@tanstack/react-router";
import { getCurrent } from "@tauri-apps/api/window";
export const Route = createFileRoute("/store")({
component: Screen,
});
function Screen() {
// @ts-ignore, just work!!!
const { id } = Route.useSearch();
const close = async () => {
const mainWindow = getCurrent();
await mainWindow.emit("columns", { type: "remove", id });
};
return (
<Column.Root>
<Column.Content>
<div className="flex h-14 shrink-0 items-center gap-2 border-b border-neutral-100 px-3 dark:border-neutral-900">
<Link to="/store/official">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-6 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<LaurelIcon className="size-5" />
Official
</div>
)}
</Link>
<Link to="/store/community">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-6 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<GlobalIcon className="size-5" />
Community
</div>
)}
</Link>
<div className="flex h-14 shrink-0 items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900">
<div className="inline-flex h-full w-full items-center gap-2">
<Link to="/store/official">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-6 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<LaurelIcon className="size-5" />
Official
</div>
)}
</Link>
<Link to="/store/community">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-6 text-sm font-medium",
isActive
? "bg-neutral-100 dark:bg-neutral-900"
: "opacity-50",
)}
>
<GlobalIcon className="size-5" />
Community
</div>
)}
</Link>
</div>
<button type="button" onClick={close}>
<CancelIcon className="size-4 text-neutral-700 dark:text-neutral-300" />
</button>
</div>
<Outlet />
</Column.Content>