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

partial support replaceable event

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-16 16:06:01 +07:00
parent 11ad281d72
commit 1206486016
5 changed files with 144 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,89 +1,24 @@
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { ArrowRightIcon } from '@shared/icons';
import { TitleBar } from '@shared/titleBar';
import { useResources } from '@stores/resources';
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 }) {
const navigate = useNavigate();
const readResource = useResources((state) => state.readResource);
const resources = useResources((state) => state.resources);
const readed = useResources((state) => state.readed);
const open = (naddr: string) => {
readResource(naddr);
navigate(`/notes/article/${naddr}`);
};
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" />
@@ -92,24 +27,37 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
<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>
{resource.data.length ? (
resource.data.map((item, index) => (
<button
key={index}
type="button"
onClick={() => open(item.id)}
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 items-start gap-1">
<h5 className="font-semibold leading-none">{item.title}</h5>
{readed.has(item.id) ? (
<p className="text-sm leading-none text-green-500">Readed</p>
) : (
<p className="text-sm leading-none text-white/70">Unread</p>
)}
</div>
</div>
</div>
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
<button type="button">
<ArrowRightIcon className="h-5 w-5 text-white" />
</button>
</button>
</Link>
))}
))
) : (
<div className="flex h-14 items-center justify-center rounded-xl bg-white/10 px-3 py-3">
<p className="text-sm font-medium text-white">
More resources are coming, stay tuned.
</p>
</div>
)}
</div>
</div>
))}