feat: explore (#85)

src/components/OthersRelayList/index.tsx

@@ -3,12 +3,10 @@ import { Badge } from '@/components/ui/badge'
 import { useFetchRelayInfo, useFetchRelayList } from '@/hooks'
 import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
-import { simplifyUrl } from '@/lib/url'
 import { TMailboxRelay } from '@/types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import RelayIcon from '../RelayIcon'
-import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
+import RelaySimpleInfo from '../RelaySimpleInfo'
 
 export default function OthersRelayList({ userId }: { userId: string }) {
   const { t } = useTranslation()
@@ -35,27 +33,15 @@ function RelayItem({ relay }: { relay: TMailboxRelay }) {
   const { url, scope } = relay
 
   return (
-    <div
-      className="flex items-center gap-2 justify-between p-4 rounded-lg border clickable"
-      onClick={() => push(toRelay(url))}
-    >
-      <div className="flex-1 w-0 space-y-2">
-        <div className="flex items-center gap-2 w-full">
-          <RelayIcon url={url} />
-          <div className="truncate font-semibold text-lg">{simplifyUrl(url)}</div>
-        </div>
-        {!!relayInfo?.description && <div className="line-clamp-2">{relayInfo.description}</div>}
-        <div className="flex gap-2">
-          {['both', 'read'].includes(scope) && (
-            <Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
-          )}
-          {['both', 'write'].includes(scope) && (
-            <Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
-        <SaveRelayDropdownMenu urls={[url]} />
+    <div className="p-4 rounded-lg border clickable space-y-1" onClick={() => push(toRelay(url))}>
+      <RelaySimpleInfo relayInfo={relayInfo} hideBadge />
+      <div className="flex gap-2">
+        {['both', 'read'].includes(scope) && (
+          <Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
+        )}
+        {['both', 'write'].includes(scope) && (
+          <Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
+        )}
       </div>
     </div>
   )