28 changed files with 393 additions and 163 deletions
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"names": { |
||||
"_": "8125b911ed0e94dbe3008a0be48cfe5cd0c0b05923cfff917ae7e87da8400883", |
||||
"cody": "8125b911ed0e94dbe3008a0be48cfe5cd0c0b05923cfff917ae7e87da8400883", |
||||
"cody2": "24462930821b45f530ec0063eca0a6522e5a577856f982fa944df0ef3caf03ab" |
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
import { useState } from 'react' |
||||
|
||||
export function Favicon({ domain, className }: { domain: string; className?: string }) { |
||||
const [error, setError] = useState(false) |
||||
if (error) return null |
||||
|
||||
return ( |
||||
<img |
||||
src={`https://${domain}/favicon.ico`} |
||||
alt={domain} |
||||
className={className} |
||||
onError={() => setError(true)} |
||||
/> |
||||
) |
||||
} |
||||
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
import { useEffect, useRef, useState } from 'react' |
||||
import UserItem from '../UserItem' |
||||
|
||||
export default function ProfileList({ pubkeys }: { pubkeys: string[] }) { |
||||
const [visiblePubkeys, setVisiblePubkeys] = useState<string[]>([]) |
||||
const bottomRef = useRef<HTMLDivElement>(null) |
||||
|
||||
useEffect(() => { |
||||
setVisiblePubkeys(pubkeys.slice(0, 10)) |
||||
}, [pubkeys]) |
||||
|
||||
useEffect(() => { |
||||
const options = { |
||||
root: null, |
||||
rootMargin: '10px', |
||||
threshold: 1 |
||||
} |
||||
|
||||
const observerInstance = new IntersectionObserver((entries) => { |
||||
if (entries[0].isIntersecting && pubkeys.length > visiblePubkeys.length) { |
||||
setVisiblePubkeys((prev) => [...prev, ...pubkeys.slice(prev.length, prev.length + 10)]) |
||||
} |
||||
}, options) |
||||
|
||||
const currentBottomRef = bottomRef.current |
||||
if (currentBottomRef) { |
||||
observerInstance.observe(currentBottomRef) |
||||
} |
||||
|
||||
return () => { |
||||
if (observerInstance && currentBottomRef) { |
||||
observerInstance.unobserve(currentBottomRef) |
||||
} |
||||
} |
||||
}, [visiblePubkeys, pubkeys]) |
||||
|
||||
return ( |
||||
<div className="px-4"> |
||||
{visiblePubkeys.map((pubkey, index) => ( |
||||
<UserItem key={`${index}-${pubkey}`} pubkey={pubkey} /> |
||||
))} |
||||
{pubkeys.length > visiblePubkeys.length && <div ref={bottomRef} />} |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue