69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
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';
|
|
|
|
export function LearnNostrWidget({ params }: { params: Widget }) {
|
|
const navigate = useNavigate();
|
|
const openResource = useResources((state) => state.openResource);
|
|
const resources = useResources((state) => state.resources);
|
|
const seens = useResources((state) => state.seens);
|
|
|
|
const open = (naddr: string) => {
|
|
// add resource to seen list
|
|
openResource(naddr);
|
|
// redirect
|
|
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" />
|
|
<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.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>
|
|
{seens.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>
|
|
<button type="button">
|
|
<ArrowRightIcon className="h-5 w-5 text-white" />
|
|
</button>
|
|
</button>
|
|
))
|
|
) : (
|
|
<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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|