feat: relay reviews
This commit is contained in:
codytseng
parent
fcb31d8052
commit
2439150c6e
40 changed files with 1206 additions and 207 deletions
|
|
@ -1,21 +1,24 @@
|
|||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
|
||||
import { useFetchRelayInfo } from '@/hooks'
|
||||
import { normalizeHttpUrl } from '@/lib/url'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import { Check, Copy, GitBranch, Link, Mail, SquareCode } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import PostEditor from '../PostEditor'
|
||||
import RelayBadges from '../RelayBadges'
|
||||
import RelayIcon from '../RelayIcon'
|
||||
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
|
||||
import UserAvatar from '../UserAvatar'
|
||||
import Username from '../Username'
|
||||
import RelayReviewsPreview from './RelayReviewsPreview'
|
||||
|
||||
export default function RelayInfo({ url, className }: { url: string; className?: string }) {
|
||||
const { t } = useTranslation()
|
||||
const { checkLogin } = useNostr()
|
||||
const { relayInfo, isFetching } = useFetchRelayInfo(url)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
|
|
@ -24,97 +27,94 @@ export default function RelayInfo({ url, className }: { url: string; className?:
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={cn('px-4 space-y-4 mb-2', className)}>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 justify-between">
|
||||
<div className="flex gap-2 items-center truncate">
|
||||
<RelayIcon url={url} className="w-8 h-8" />
|
||||
<div className="text-2xl font-semibold truncate select-text">
|
||||
{relayInfo.name || relayInfo.shortUrl}
|
||||
</div>
|
||||
</div>
|
||||
<RelayControls url={relayInfo.url} />
|
||||
</div>
|
||||
<RelayBadges relayInfo={relayInfo} />
|
||||
{!!relayInfo.tags?.length && (
|
||||
<div className="flex gap-2">
|
||||
{relayInfo.tags.map((tag) => (
|
||||
<Badge variant="secondary">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.description && (
|
||||
<div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
|
||||
{relayInfo.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Homepage')}:</div>
|
||||
<a
|
||||
href={normalizeHttpUrl(relayInfo.url)}
|
||||
target="_blank"
|
||||
className="hover:underline text-primary select-text"
|
||||
>
|
||||
{normalizeHttpUrl(relayInfo.url)}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{relayInfo.payments_url && (
|
||||
<div className={cn('space-y-4 mb-2', className)}>
|
||||
<div className="px-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Payment page')}:</div>
|
||||
<div className="flex items-center gap-2 justify-between">
|
||||
<div className="flex gap-2 items-center truncate">
|
||||
<RelayIcon url={url} className="w-8 h-8" />
|
||||
<div className="text-2xl font-semibold truncate select-text">
|
||||
{relayInfo.name || relayInfo.shortUrl}
|
||||
</div>
|
||||
</div>
|
||||
<RelayControls url={relayInfo.url} />
|
||||
</div>
|
||||
{!!relayInfo.tags?.length && (
|
||||
<div className="flex gap-2">
|
||||
{relayInfo.tags.map((tag) => (
|
||||
<Badge variant="secondary">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.description && (
|
||||
<div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
|
||||
{relayInfo.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Homepage')}</div>
|
||||
<a
|
||||
href={normalizeHttpUrl(relayInfo.payments_url)}
|
||||
href={normalizeHttpUrl(relayInfo.url)}
|
||||
target="_blank"
|
||||
className="hover:underline text-primary select-text"
|
||||
>
|
||||
{relayInfo.payments_url}
|
||||
{normalizeHttpUrl(relayInfo.url)}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{relayInfo.pubkey && (
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Operator')}</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<UserAvatar userId={relayInfo.pubkey} size="small" />
|
||||
<Username userId={relayInfo.pubkey} className="font-semibold" />
|
||||
</div>
|
||||
|
||||
<ScrollArea className="overflow-x-auto">
|
||||
<div className="flex gap-8 pb-2">
|
||||
{relayInfo.pubkey && (
|
||||
<div className="space-y-2 w-fit">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Operator')}</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<UserAvatar userId={relayInfo.pubkey} size="small" />
|
||||
<Username userId={relayInfo.pubkey} className="font-semibold text-nowrap" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.contact && (
|
||||
<div className="space-y-2 w-fit">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Contact')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text text-nowrap">
|
||||
<Mail />
|
||||
{relayInfo.contact}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.software && (
|
||||
<div className="space-y-2 w-fit">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Software')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text text-nowrap">
|
||||
<SquareCode />
|
||||
{formatSoftware(relayInfo.software)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.version && (
|
||||
<div className="space-y-2 w-fit">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Version')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text text-nowrap">
|
||||
<GitBranch />
|
||||
{relayInfo.version}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.contact && (
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Contact')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text">
|
||||
<Mail />
|
||||
{relayInfo.contact}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.software && (
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Software')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text">
|
||||
<SquareCode />
|
||||
{formatSoftware(relayInfo.software)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relayInfo.version && (
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="text-sm font-semibold text-muted-foreground">{t('Version')}</div>
|
||||
<div className="flex gap-2 items-center font-semibold select-text">
|
||||
<GitBranch />
|
||||
{relayInfo.version}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
onClick={() => checkLogin(() => setOpen(true))}
|
||||
>
|
||||
{t('Share something on this Relay')}
|
||||
</Button>
|
||||
<PostEditor open={open} setOpen={setOpen} openFrom={[relayInfo.url]} />
|
||||
</div>
|
||||
<Button variant="secondary" className="w-full" onClick={() => setOpen(true)}>
|
||||
{t('Share something on this Relay')}
|
||||
</Button>
|
||||
<PostEditor open={open} setOpen={setOpen} openFrom={[relayInfo.url]} />
|
||||
<RelayReviewsPreview relayUrl={url} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue