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

ok fine

Browse Source
This commit is contained in:
reya
2023-10-18 14:49:20 +07:00
parent 489ab6bd0b
commit 939a72f945
47 changed files with 389 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/relays/components/relayList.tsx
View File

@@ -53,9 +53,9 @@ export function RelayList() {
</div>
</div>
) : (
<VList className="mt-20 h-full scrollbar-none">
<VList className="h-full scrollbar-none">
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
All relays used by your follows
</h3>
</div>

2
src/app/relays/components/userRelay.tsx
View File

@@ -40,7 +40,7 @@ export function UserRelay() {
{relayUrls.includes(item) ? (
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500"></span>
</span>
) : (
<span className="relative flex h-2 w-2">

50
src/app/relays/relay.tsx
View File

@@ -25,23 +25,27 @@ export function RelayScreen() {
return (
<div className="grid h-full w-full grid-cols-3">
<div className="col-span-2 border-r border-white/5">
<div className="inline-flex h-16 w-full items-center gap-2.5 border-b border-white/5 px-3">
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
<div className="inline-flex h-16 w-full items-center gap-2.5 border-b border-neutral-100 px-3 dark:border-neutral-900">
<button type="button" onClick={() => navigate(-1)}>
<ArrowLeftIcon className="h-5 w-5 text-white/70 hover:text-white" />
<ArrowLeftIcon className="h-5 w-5 text-neutral-500 hover:text-neutral-600 dark:text-neutral-600 dark:hover:text-neutral-500" />
</button>
<h3 className="font-semibold text-white">Global events</h3>
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
Global events
</h3>
</div>
<RelayEventList relayUrl={url} />
</div>
<div className="col-span-1">
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
<h3 className="font-semibold text-white">Information</h3>
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
<h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
Information
</h3>
</div>
<div className="mt-4 px-3">
<Suspense
fallback={
<div className="flex items-center gap-2 text-sm font-medium text-white">
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900 dark:text-neutral-100">
<LoaderIcon className="h-4 w-4 animate-spin" />
Loading...
</div>
@@ -58,24 +62,28 @@ export function RelayScreen() {
{(resolvedRelay) => (
<div className="flex flex-col gap-5">
<div>
<h3 className="font-semibold leading-tight text-white">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
{resolvedRelay.name}
</h3>
<p className="text-sm font-medium text-white/70">
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-500">
{resolvedRelay.description}
</p>
</div>
{resolvedRelay.pubkey ? (
<div className="flex flex-col gap-1">
<h5 className="text-sm font-semibold text-white/70">Owner:</h5>
<div className="w-full rounded-lg bg-white/10 px-2 py-2">
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Owner:
</h5>
<div className="w-full rounded-lg bg-neutral-100 px-2 py-2 dark:bg-neutral-900">
<User pubkey={resolvedRelay.pubkey} variant="simple" />
</div>
</div>
) : null}
{resolvedRelay.contact ? (
<div>
<h5 className="text-sm font-semibold text-white/70">Contact:</h5>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Contact:
</h5>
<a
href={`mailto:${resolvedRelay.contact}`}
target="_blank"
@@ -87,7 +95,9 @@ export function RelayScreen() {
</div>
) : null}
<div>
<h5 className="text-sm font-semibold text-white/70">Software:</h5>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Software:
</h5>
<a
href={resolvedRelay.software}
target="_blank"
@@ -100,7 +110,7 @@ export function RelayScreen() {
</a>
</div>
<div>
<h5 className="text-sm font-semibold text-white/70">
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Supported NIPs:
</h5>
<div className="mt-2 grid grid-cols-7 gap-2">
@@ -110,7 +120,7 @@ export function RelayScreen() {
href={`https://nips.be/${item}`}
target="_blank"
rel="noreferrer"
className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-blue-600"
className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
>
{item}
</a>
@@ -119,7 +129,9 @@ export function RelayScreen() {
</div>
{resolvedRelay.limitation ? (
<div>
<h5 className="text-sm font-semibold text-white/70">Limitation</h5>
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
Limitation
</h5>
<div className="flex flex-col gap-2 divide-y divide-white/5">
{Object.keys(resolvedRelay.limitation).map((key, index) => {
return (
@@ -127,10 +139,10 @@ export function RelayScreen() {
key={index}
className="flex items-baseline justify-between pt-2"
>
<p className="text-sm font-medium text-white">
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
{titleCase(key)}:
</p>
<p className="text-sm font-medium text-white/70">
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
{resolvedRelay.limitation[key].toString()}
</p>
</div>
@@ -149,7 +161,7 @@ export function RelayScreen() {
>
Open payment website
</a>
<span className="text-center text-xs text-white/70">
<span className="text-center text-xs text-neutral-600 dark:text-neutral-400">
You need to make a payment to connect this relay
</span>
</div>