highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-26 01:31:48 +01:00
Code Issues 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
Show Stats 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>
);
}

4
packages/icons/src/arrowLeft.tsx
View File

@ -5,8 +5,8 @@ export function ArrowLeftIcon(props: JSX.IntrinsicElements["svg"]) {
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m10 6-6 6 6 6m-5-6h15"
strokeWidth="1.5"
d="M10 5.75 3.75 12 10 18.25M4.5 12h15.75"
/>
</svg>
);

4
packages/icons/src/arrowRight.tsx
View File

@ -5,8 +5,8 @@ export function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m14 6 6 6-6 6m5-6H4"
strokeWidth="1.5"
d="M14 5.75 20.25 12 14 18.25M19.5 12H3.75"
/>
</svg>
);

8
packages/icons/src/horizontalDots.tsx
View File

@ -1,12 +1,16 @@
export function HorizontalDotsIcon(props: JSX.IntrinsicElements["svg"]) {
return (
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM4 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
strokeWidth="1.5"
d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
);

12
packages/icons/src/settings.tsx
View File

@ -7,15 +7,15 @@ export function SettingsIcon(
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
<path
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="2"
d="m7.99 5.398-.685-.158A1.722 1.722 0 0 0 5.24 7.305l.158.684a1.946 1.946 0 0 1-.817 2.057l-.832.555a1.682 1.682 0 0 0 0 2.798l.832.555c.673.449.999 1.268.817 2.057l-.158.684a1.722 1.722 0 0 0 2.065 2.065l.684-.158a1.946 1.946 0 0 1 2.057.817l.555.832a1.682 1.682 0 0 0 2.798 0l.555-.832a1.946 1.946 0 0 1 2.057-.817l.684.158a1.722 1.722 0 0 0 2.065-2.065l-.158-.684a1.946 1.946 0 0 1 .817-2.057l.832-.555a1.682 1.682 0 0 0 0-2.798l-.832-.555a1.946 1.946 0 0 1-.817-2.057l.158-.684a1.722 1.722 0 0 0-2.065-2.065l-.684.158a1.946 1.946 0 0 1-2.057-.817l-.555-.832a1.682 1.682 0 0 0-2.798 0l-.555.832a1.946 1.946 0 0 1-2.057.817Z"
strokeLinecap="square"
strokeWidth="1.5"
d="M11.002 3.325a2 2 0 0 1 1.996 0l6.25 3.598a2 2 0 0 1 1.002 1.733v6.688a2 2 0 0 1-1.002 1.733l-6.25 3.598a2 2 0 0 1-1.996 0l-6.25-3.598a2 2 0 0 1-1.002-1.733V8.656a2 2 0 0 1 1.002-1.733l6.25-3.598Z"
/>
<path
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="2"
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
strokeLinecap="square"
strokeWidth="1.5"
d="M15.25 12a3.25 3.25 0 1 1-6.5 0 3.25 3.25 0 0 1 6.5 0Z"
/>
</svg>
);

5
packages/ui/src/column/root.tsx
View File

@ -3,16 +3,19 @@ import { ReactNode } from "react";
export function ColumnRoot({
children,
shadow = true,
className,
}: {
children: ReactNode;
shadow?: boolean;
className?: string;
}) {
return (
<div className="h-full w-full p-2">
<div
className={cn(
"shadow-primary relative flex h-full w-full flex-col rounded-xl bg-white dark:bg-black",
"relative flex h-full w-full flex-col rounded-xl bg-white dark:bg-black",
shadow ? "shadow-primary" : "",
className,
)}
>