highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-04-11 05:19:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ren Amamiya 2023-09-16 08:57:24 +07:00
parent fe4bfa1699
commit 11ad281d72
2 changed files with 106 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/notes/users/repost.tsx
View File

@ -18,10 +18,10 @@ export function RepostUser({ pubkey }: { pubkey: string }) {
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-black"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[13rem] truncate text-white/50">
<h5 className="max-w-[13rem] truncate text-sm text-white/50">
{user?.name || user?.display_name || shortenKey(pubkey)}
</h5>
<span className="text-white/50">reposted</span>
<span className="text-sm text-white/50">reposted</span>
</div>
</div>
);

156
src/shared/widgets/other/learnNostr.tsx
View File

@ -1,66 +1,118 @@
import { Link } from 'react-router-dom';
import { ArrowRightIcon } from '@shared/icons';
import { TitleBar } from '@shared/titleBar';
import { Widget } from '@utils/types';
const resources = [
{
title: 'The Basics (provide by nostr.com)',
data: [
{
title: 'What is Nostr?',
image: '',
url: '',
},
{
title: 'Understanding keys',
image: '',
url: '',
},
{
title: "What's a client?",
image: '',
url: '',
},
{
title: 'What are relays?',
image: '',
url: '',
},
{
title: 'What is an event?',
image: '',
url: '',
},
{
title: 'How to help Nostr?',
image: '',
url: '',
},
],
},
{
title: 'Lume Tutorials',
data: [
{
title: 'How to use widget?',
image: '',
url: '',
},
{
title: 'How to send a post?',
image: '',
url: '',
},
{
title: 'How to find more people?',
image: '',
url: '',
},
{
title: 'How to edit your profile?',
image: '',
url: '',
},
{
title: 'How to use focus mode?',
image: '',
url: '',
},
{
title: 'Report an issue',
image: '',
url: '',
},
{
title: 'How to support Lume',
image: '',
url: '',
},
],
},
];
export function LearnNostrWidget({ params }: { params: Widget }) {
return (
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
<TitleBar id={params.id} title="The Joy of Nostr" />
<div className="flex h-full flex-col gap-6 px-3">
<div>
<h3 className="mb-2 font-medium text-white/50">The Basics</h3>
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
<div className="inline-flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
<div className="flex flex-col gap-1">
<h5 className="font-semibold leading-none">What is Nostr?</h5>
<p className="text-sm leading-none text-white/70">Unread</p>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
</div>
<div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
<div className="inline-flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
<div className="flex flex-col gap-1">
<h5 className="font-semibold leading-none">Understanding keys</h5>
<p className="text-sm leading-none text-white/70">Unread</p>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
</div>
<div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
<div className="inline-flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
<div className="flex flex-col gap-1">
<h5 className="font-semibold leading-none">What&apos;s a client?</h5>
<p className="text-sm leading-none text-white/70">Unread</p>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
</div>
<div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
<div className="inline-flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
<div className="flex flex-col gap-1">
<h5 className="font-semibold leading-none">What are relays?</h5>
<p className="text-sm leading-none text-white/70">Unread</p>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
<div className="scrollbar-hide h-full overflow-y-auto px-3 pb-20">
{resources.map((resource, index) => (
<div key={index} className="mb-6">
<h3 className="mb-2 font-medium text-white/50">{resource.title}</h3>
<div className="flex flex-col gap-2">
{resource.data.map((item, index) => (
<Link
key={index}
to={`/notes/articles/${item.url}`}
className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3 hover:bg-white/20"
>
<div className="inline-flex items-center gap-2.5">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
<div className="flex flex-col gap-1">
<h5 className="font-semibold leading-none">{item.title}</h5>
<p className="text-sm leading-none text-white/70">Unread</p>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
</Link>
))}
</div>
</div>
</div>
))}
</div>
</div>
);