mirror of
https://github.com/lumehq/lume.git
synced 2025-03-18 05:41:53 +01:00
feat(columns): add default column
This commit is contained in:
reya
parent
7856d6d49d
commit
698f5a5d6d
@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@columns/antenas": "workspace:^",
|
||||
"@columns/default": "workspace:^",
|
||||
"@columns/group": "workspace:^",
|
||||
"@columns/hashtag": "workspace:^",
|
||||
"@columns/notification": "workspace:^",
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import { Antenas } from "@columns/antenas";
|
||||
import { Default } from "@columns/default";
|
||||
import { Group } from "@columns/group";
|
||||
import { Hashtag } from "@columns/hashtag";
|
||||
import { Thread } from "@columns/thread";
|
||||
import { Timeline } from "@columns/timeline";
|
||||
import { User } from "@columns/user";
|
||||
import { useColumnContext } from "@lume/ark";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
HelpIcon,
|
||||
PlusSquareIcon,
|
||||
} from "@lume/icons";
|
||||
import { IColumn } from "@lume/types";
|
||||
import { COL_TYPES } from "@lume/utils";
|
||||
import { useRef, useState } from "react";
|
||||
@ -12,11 +19,13 @@ import { VList, VListHandle } from "virtua";
|
||||
|
||||
export function HomeScreen() {
|
||||
const ref = useRef<VListHandle>(null);
|
||||
const { columns } = useColumnContext();
|
||||
const { addColumn, columns } = useColumnContext();
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const renderItem = (column: IColumn) => {
|
||||
switch (column.kind) {
|
||||
case COL_TYPES.default:
|
||||
return <Default key={column.id} column={column} />;
|
||||
case COL_TYPES.newsfeed:
|
||||
return <Timeline key={column.id} column={column} />;
|
||||
case COL_TYPES.thread:
|
||||
@ -30,12 +39,12 @@ export function HomeScreen() {
|
||||
case COL_TYPES.antenas:
|
||||
return <Antenas key={column.id} column={column} />;
|
||||
default:
|
||||
return <Timeline key={column.id} column={column} />;
|
||||
return <Default key={column.id} column={column} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<div className="relative w-full h-full">
|
||||
<VList
|
||||
ref={ref}
|
||||
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
||||
@ -74,6 +83,58 @@ export function HomeScreen() {
|
||||
>
|
||||
{columns.map((column) => renderItem(column))}
|
||||
</VList>
|
||||
<div className="absolute bottom-3 right-3">
|
||||
<div className="flex items-center gap-1 p-1 bg-black/50 backdrop-blur-xl rounded-xl">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const prevIndex = Math.max(selectedIndex - 1, 0);
|
||||
setSelectedIndex(prevIndex);
|
||||
ref.current.scrollToIndex(prevIndex, {
|
||||
align: "center",
|
||||
smooth: true,
|
||||
});
|
||||
}}
|
||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
|
||||
>
|
||||
<ArrowLeftIcon className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
|
||||
setSelectedIndex(nextIndex);
|
||||
ref.current.scrollToIndex(nextIndex, {
|
||||
align: "center",
|
||||
smooth: true,
|
||||
});
|
||||
}}
|
||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
|
||||
>
|
||||
<ArrowRightIcon className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () =>
|
||||
await addColumn({
|
||||
kind: COL_TYPES.default,
|
||||
title: "",
|
||||
content: "",
|
||||
})
|
||||
}
|
||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
|
||||
>
|
||||
<PlusSquareIcon className="size-5" />
|
||||
</button>
|
||||
<div className="w-px h-6 bg-white/10" />
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
|
||||
>
|
||||
<HelpIcon className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
26
packages/@columns/default/package.json
Normal file
26
packages/@columns/default/package.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "@columns/default",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./src/index.tsx",
|
||||
"dependencies": {
|
||||
"@lume/ark": "workspace:^",
|
||||
"@lume/icons": "workspace:^",
|
||||
"@lume/ui": "workspace:^",
|
||||
"@lume/utils": "workspace:^",
|
||||
"@nostr-dev-kit/ndk": "^2.3.2",
|
||||
"@tanstack/react-query": "^5.17.0",
|
||||
"react": "^18.2.0",
|
||||
"react-router-dom": "^6.21.1",
|
||||
"sonner": "^1.3.1",
|
||||
"virtua": "^0.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lume/tailwindcss": "workspace:^",
|
||||
"@lume/tsconfig": "workspace:^",
|
||||
"@lume/types": "workspace:^",
|
||||
"@types/react": "^18.2.46",
|
||||
"tailwind": "^4.0.0",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
45
packages/@columns/default/src/index.tsx
Normal file
45
packages/@columns/default/src/index.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Column } from "@lume/ark";
|
||||
import { ColumnIcon } from "@lume/icons";
|
||||
import { IColumn } from "@lume/types";
|
||||
import { TOPICS } from "@lume/utils";
|
||||
|
||||
export function Default({ column }: { column: IColumn }) {
|
||||
return (
|
||||
<Column.Root>
|
||||
<Column.Header
|
||||
id={column.id}
|
||||
title="Add columns"
|
||||
icon={<ColumnIcon className="size-4" />}
|
||||
/>
|
||||
<div className="h-full px-3 mt-3 overflow-y-auto scrollbar-none">
|
||||
<div className="flex flex-col gap-5">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold leading-tight">Topics</h1>
|
||||
<p className="text-neutral-600 dark:text-neutral-400">
|
||||
Discover content based on your interests.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{TOPICS.sort((a, b) => a.title.localeCompare(b.title)).map(
|
||||
(topic, index) => (
|
||||
<div
|
||||
key={topic + index.toString()}
|
||||
className="flex flex-col w-full px-3 rounded-lg bg-neutral-100"
|
||||
>
|
||||
<div className="rounded-md h-9 w-9 shrink-0">
|
||||
<img
|
||||
src={`/${topic.title.toLowerCase()}.jpg`}
|
||||
alt={topic.title}
|
||||
className="rounded-md h-9 w-9"
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium">{topic.title}</p>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Column.Root>
|
||||
);
|
||||
}
|
||||
8
packages/@columns/default/tailwind.config.js
Normal file
8
packages/@columns/default/tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
import sharedConfig from "@lume/tailwindcss";
|
||||
|
||||
const config = {
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||
presets: [sharedConfig],
|
||||
};
|
||||
|
||||
export default config;
|
||||
8
packages/@columns/default/tsconfig.json
Normal file
8
packages/@columns/default/tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "@lume/tsconfig/base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@ -98,3 +98,6 @@ export * from "./src/depotFilled";
|
||||
export * from "./src/nwcFilled";
|
||||
export * from "./src/moveLeft";
|
||||
export * from "./src/moveRight";
|
||||
export * from "./src/help";
|
||||
export * from "./src/plusSquare";
|
||||
export * from "./src/column";
|
||||
|
||||
20
packages/icons/src/column.tsx
Normal file
20
packages/icons/src/column.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export function ColumnIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 6.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 3 5.08 3 6.2 3h.6c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C10 4.52 10 5.08 10 6.2v11.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C8.48 21 7.92 21 6.8 21h-.6c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 19.48 3 18.92 3 17.8V6.2zM14 6.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C15.52 3 16.08 3 17.2 3h.6c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 4.52 21 5.08 21 6.2v11.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 21 18.92 21 17.8 21h-.6c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C14 19.48 14 18.92 14 17.8V6.2z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
20
packages/icons/src/help.tsx
Normal file
20
packages/icons/src/help.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export function HelpIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M9.281 9.719A2.719 2.719 0 1113.478 12c-.724.47-1.478 1.137-1.478 2m0 3h.001M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
20
packages/icons/src/plusSquare.tsx
Normal file
20
packages/icons/src/plusSquare.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export function PlusSquareIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M12 15v-3m0 0V9m0 3H9m3 0h3m-3 9c-2.796 0-4.193 0-5.296-.457a6 6 0 01-3.247-3.247C3 16.194 3 14.796 3 12c0-2.796 0-4.193.457-5.296a6 6 0 013.247-3.247C7.807 3 9.204 3 12 3c2.796 0 4.194 0 5.296.457a6 6 0 013.247 3.247C21 7.807 21 9.204 21 12c0 2.796 0 4.194-.457 5.296a6 6 0 01-3.247 3.247C16.194 21 14.796 21 12 21z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -32,6 +32,7 @@ export const HASHTAGS = [
|
||||
];
|
||||
|
||||
export const COL_TYPES = {
|
||||
default: 0,
|
||||
user: 1,
|
||||
thread: 2,
|
||||
hashtag: 3,
|
||||
|
||||
55
pnpm-lock.yaml
generated
55
pnpm-lock.yaml
generated
@ -23,6 +23,9 @@ importers:
|
||||
'@columns/antenas':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/@columns/antenas
|
||||
'@columns/default':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/@columns/default
|
||||
'@columns/group':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/@columns/group
|
||||
@ -347,6 +350,58 @@ importers:
|
||||
specifier: ^5.3.3
|
||||
version: 5.3.3
|
||||
|
||||
packages/@columns/default:
|
||||
dependencies:
|
||||
'@lume/ark':
|
||||
specifier: workspace:^
|
||||
version: link:../../ark
|
||||
'@lume/icons':
|
||||
specifier: workspace:^
|
||||
version: link:../../icons
|
||||
'@lume/ui':
|
||||
specifier: workspace:^
|
||||
version: link:../../ui
|
||||
'@lume/utils':
|
||||
specifier: workspace:^
|
||||
version: link:../../utils
|
||||
'@nostr-dev-kit/ndk':
|
||||
specifier: ^2.3.2
|
||||
version: 2.3.2(typescript@5.3.3)
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.17.0
|
||||
version: 5.17.0(react@18.2.0)
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
react-router-dom:
|
||||
specifier: ^6.21.1
|
||||
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
|
||||
sonner:
|
||||
specifier: ^1.3.1
|
||||
version: 1.3.1(react-dom@18.2.0)(react@18.2.0)
|
||||
virtua:
|
||||
specifier: ^0.18.1
|
||||
version: 0.18.1(react-dom@18.2.0)(react@18.2.0)
|
||||
devDependencies:
|
||||
'@lume/tailwindcss':
|
||||
specifier: workspace:^
|
||||
version: link:../../tailwindcss
|
||||
'@lume/tsconfig':
|
||||
specifier: workspace:^
|
||||
version: link:../../tsconfig
|
||||
'@lume/types':
|
||||
specifier: workspace:^
|
||||
version: link:../../types
|
||||
'@types/react':
|
||||
specifier: ^18.2.46
|
||||
version: 18.2.46
|
||||
tailwind:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0
|
||||
typescript:
|
||||
specifier: ^5.3.3
|
||||
version: 5.3.3
|
||||
|
||||
packages/@columns/group:
|
||||
dependencies:
|
||||
'@lume/ark':
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user