wip: ui
This commit is contained in:
@@ -27,7 +27,9 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
|
||||
<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>
|
||||
<h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
||||
{resource.title}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{resource.data.length ? (
|
||||
resource.data.map((item, index) => (
|
||||
@@ -35,22 +37,24 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => open(item.id)}
|
||||
className="flex items-center justify-between rounded-xl bg-white/10 px-4 py-3 hover:bg-white/20"
|
||||
className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
|
||||
>
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<h5 className="font-semibold leading-none">{item.title}</h5>
|
||||
<div className="flex flex-col items-start">
|
||||
<h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{item.title}
|
||||
</h5>
|
||||
{seens.has(item.id) ? (
|
||||
<p className="text-sm leading-none text-green-500">Readed</p>
|
||||
<p className="text-sm text-green-500">Readed</p>
|
||||
) : (
|
||||
<p className="text-sm leading-none text-white/70">Unread</p>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
|
||||
)}
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-white" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
|
||||
</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">
|
||||
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
||||
<p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||||
More resources are coming, stay tuned.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user