diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Avatar.svelte | 5 | ||||
| -rw-r--r-- | src/components/Feed.svelte | 49 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
3 files changed, 53 insertions, 2 deletions
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index cfbec54f..7ee774bf 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -5,12 +5,13 @@ export let user; export let size = 32; export let disabled = false; - export let src; + export let src = undefined; $: s = size.toString(); + $: link = user ? `/${user.username}` : '/'; </script> -<a href={`/${user ? user.username : ''}`} class:pointer-events-none={disabled}> +<a href={link} class:pointer-events-none={disabled}> <div class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center" > diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte new file mode 100644 index 00000000..973afa19 --- /dev/null +++ b/src/components/Feed.svelte @@ -0,0 +1,49 @@ +<script> + import { Avatar } from '$comp'; + import { browser } from '$app/environment'; + import VirtualScroll from 'svelte-virtual-scroll-list'; + import { runner } from '$lib/utils'; + export let events; + + let distance = (d) => { + let diff = Math.round(Date.now() / 1000) - d; + return diff > 3600 + ? Math.round(diff / 3600) + 'd' + : diff > 60 + ? Math.round(diff / 60) + 'm' + : diff > 2 + ? diff + 's' + : 'now'; + }; + + let w; +</script> + +<svelte:window bind:innerWidth={w} /> + +{#if browser} + <VirtualScroll data={events} key="id" let:data pageMode={true} estimateSize={200}> + <div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.id}> + <a href={`/${data.pubkey}`}> + <div class="mb-auto mr-2"> + <div class="md:hidden"> + <Avatar size={12} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} /> + </div> + <div class="hidden md:block"> + <Avatar size={20} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} /> + </div> + </div> + </a> + + <div class="grow" style={`max-width: ${w - 100}px`}> + <div class="w-full flex pb-1 text-black"> + <div>{data.pubkey.substr(0, 6)}</div> + <div class="text-secondary"> {distance(data.seen)}</div> + </div> + <div class="break-words"> + {data.content} + </div> + </div> + </div> + </VirtualScroll> +{/if} diff --git a/src/components/index.js b/src/components/index.js index 07b169bb..90bc1e7e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ +export { default as Feed } from './Feed.svelte'; export { default as Invoice } from './Invoice.svelte'; export { default as Request } from './Request.svelte'; export { default as Pin } from './Pin.svelte'; |