45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import "./RelaysMetadata.css";
|
||
|
import Nostrich from "nostrich.webp";
|
||
|
import { useState } from "react";
|
||
|
|
||
|
import { RelaySettings } from "Nostr";
|
||
|
import Read from "Icons/Read";
|
||
|
import Write from "Icons/Write";
|
||
|
|
||
|
const RelayFavicon = ({ url }: { url: string }) => {
|
||
|
const cleanUrl = url
|
||
|
.replace("wss://relay.", "https://")
|
||
|
.replace("wss://nostr.", "https://")
|
||
|
.replace("wss://", "https://")
|
||
|
.replace("ws://", "http://")
|
||
|
.replace(/\/$/, "");
|
||
|
const [faviconUrl, setFaviconUrl] = useState(`${cleanUrl}/favicon.ico`);
|
||
|
|
||
|
return <img className="favicon" src={faviconUrl} onError={() => setFaviconUrl(Nostrich)} />;
|
||
|
};
|
||
|
|
||
|
interface RelaysMetadataProps {
|
||
|
relays: RelaySettings[];
|
||
|
}
|
||
|
|
||
|
const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
|
||
|
return (
|
||
|
<div className="main-content">
|
||
|
{relays?.map(({ url, settings }) => {
|
||
|
return (
|
||
|
<div className="card relay-card">
|
||
|
<RelayFavicon url={url} />
|
||
|
<code className="relay-url">{url}</code>
|
||
|
<div className="relay-settings">
|
||
|
<Read className={settings.read ? "enabled" : "disabled"} />
|
||
|
<Write className={settings.write ? "enabled" : "disabled"} />
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
})}
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default RelaysMetadata;
|