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

feat: add lume store screen

Browse Source
This commit is contained in:
reya
2024-03-19 08:21:16 +07:00
parent 05b52564e0
commit 14f07dfea8
12 changed files with 135 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop2/src/components/col.tsx
View File

@@ -56,7 +56,7 @@ export function Col({
const rect = container.current.getBoundingClientRect();
const name = `column-${column.name.toLowerCase().replace(/\W/g, "")}`;
const url = column.name + `?account=${account}&name=${column.name}`;
const url = column.content + `?account=${account}&name=${column.name}`;
// create new webview
initialRect.current = rect;

4
apps/desktop2/src/routes/$account.home.tsx
View File

@@ -10,8 +10,8 @@ export const Route = createFileRoute("/$account/home")({
pendingComponent: Pending,
loader: async () => {
const columns = [
{ name: "Newsfeed", content: "/columns/newsfeed" },
{ name: "Default", content: "/columns/default" },
{ name: "Newsfeed", content: "/newsfeed" },
{ name: "Lume Store", content: "/store/official" },
];
return columns;
},

12
apps/desktop2/src/routes/$account.tsx
View File

@@ -1,9 +1,4 @@
import {
ArrowLeftIcon,
ArrowRightIcon,
ComposeFilledIcon,
PlusIcon,
} from "@lume/icons";
import { ComposeFilledIcon, HorizontalDotsIcon } from "@lume/icons";
import { Outlet, createFileRoute } from "@tanstack/react-router";
import { cn } from "@lume/utils";
import { Accounts } from "@/components/accounts";
@@ -30,10 +25,9 @@ function App() {
<Accounts />
<button
type="button"
onClick={() => ark.open_settings()}
className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
>
<PlusIcon className="size-4" />
<HorizontalDotsIcon className="size-5" />
</button>
</div>
<div className="flex items-center gap-3">
@@ -43,7 +37,7 @@ function App() {
className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
>
<ComposeFilledIcon className="size-4" />
New post
New Post
</button>
<div id="toolbar" />
</div>

16
apps/desktop2/src/routes/default.lazy.tsx
View File

@@ -1,16 +0,0 @@
import { Column } from "@lume/ui";
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/default")({
component: Screen,
});
function Screen() {
return (
<Column.Root>
<Column.Content className="flex flex-col items-center justify-center">
<p>TODO</p>
</Column.Content>
</Column.Root>
);
}

13
apps/desktop2/src/routes/store.community.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/store/community")({
component: Screen,
});
function Screen() {
return (
<div className="flex flex-col gap-3 px-3 pt-3">
<p>Coming Soon</p>
</div>
);
}

48
apps/desktop2/src/routes/store.official.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/store/official")({
component: Screen,
});
function Screen() {
return (
<div className="flex flex-col gap-3 px-3 pt-3">
<div className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3">
<div className="absolute bottom-0 left-0 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
<div className="flex h-full items-center justify-between">
<div>
<h1 className="font-semibold text-white">Group Feeds</h1>
<p className="max-w-[18rem] truncate text-sm text-white/80">
Collective of people you're interested in.
</p>
</div>
<button
type="button"
className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
>
Add
</button>
</div>
</div>
</div>
<div className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-fuchsia-100 to-red-100 px-3 pt-3">
<div className="absolute bottom-0 left-0 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
<div className="flex h-full items-center justify-between">
<div>
<h1 className="font-semibold text-white">Antenas</h1>
<p className="max-w-[18rem] truncate text-sm text-white/80">
Keep track to specific content.
</p>
</div>
<button
type="button"
className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
>
Add
</button>
</div>
</div>
</div>
</div>
);
}

48
apps/desktop2/src/routes/store.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { Column } from "@lume/ui";
import { cn } from "@lume/utils";
import { Link } from "@tanstack/react-router";
import { Outlet, createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/store")({
component: Screen,
});
function Screen() {
return (
<Column.Root>
<Column.Content>
<div className="flex h-14 shrink-0 items-center gap-3 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 rounded-full px-6 text-sm",
isActive
? "bg-neutral-100 font-medium dark:bg-neutral-900"
: "opacity-50",
)}
>
Official
</div>
)}
</Link>
<Link to="/store/community">
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center rounded-full px-6 text-sm",
isActive
? "bg-neutral-100 font-medium dark:bg-neutral-900"
: "opacity-50",
)}
>
Community
</div>
)}
</Link>
</div>
<Outlet />
</Column.Content>
</Column.Root>
);
}