aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-19 06:54:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Shusui MOYATANI
2023-02-22 22:13:13 +09:00
parent 57969c2c09
commit dadf285428
9 changed files with 206 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/TextNote.tsx
View File

@@ -4,6 +4,7 @@ import type { Event as NostrEvent } from 'nostr-tools/event';
import useProfile from '@/clients/useProfile';
import useConfig from '@/clients/useConfig';
import TextNoteContentDisplay from '@/components/textNote/TextNoteContentDisplay';
import ColumnItem from '@/components/ColumnItem';
import GeneralUserMentionDisplay from './textNote/GeneralUserMentionDisplay';
export type TextNoteProps = {
@@ -23,48 +24,50 @@ const TextNote: Component<TextNoteProps> = (props) => {
const createdAt = () => new Date(props.event.created_at * 1000).toLocaleTimeString();
return (
<div class="textnote flex w-full flex-row gap-1 overflow-hidden border-b p-1">
<div class="author-icon max-w-10 max-h-10 shrink-0">
<Show when={author()?.picture} fallback={<div class="h-10 w-10" />}>
<img
src={author()?.picture}
alt="icon"
// TODO autofit
class="h-10 w-10 rounded"
/>
</Show>
</div>
<div class="min-w-0 flex-auto">
<div class="flex justify-between gap-1 text-xs">
<div class="author flex min-w-0 truncate">
{/* TODO link to author */}
<Show when={author()?.display_name}>
<div class="author-name pr-1 font-bold">{author()?.display_name}</div>
</Show>
<div class="author-username truncate">
<Show when={author()?.name} fallback={props.event.pubkey}>
@{author()?.name}
<div class="textnote">
<ColumnItem>
<div class="author-icon max-w-10 max-h-10 shrink-0">
<Show when={author()?.picture} fallback={<div class="h-10 w-10" />}>
<img
src={author()?.picture}
alt="icon"
// TODO autofit
class="h-10 w-10 rounded"
/>
</Show>
</div>
<div class="min-w-0 flex-auto">
<div class="flex justify-between gap-1 text-xs">
<div class="author flex min-w-0 truncate">
{/* TODO link to author */}
<Show when={author()?.display_name}>
<div class="author-name pr-1 font-bold">{author()?.display_name}</div>
</Show>
<div class="author-username truncate">
<Show when={author()?.name} fallback={props.event.pubkey}>
@{author()?.name}
</Show>
</div>
</div>
<div class="created-at shrink-0">{createdAt()}</div>
</div>
<div class="created-at shrink-0">{createdAt()}</div>
</div>
<Show when={replyingToPubKeys().length > 0}>
<div class="text-xs">
{'Replying to '}
<For each={replyingToPubKeys()}>
{(pubkey: string) => (
<span class="pr-1 text-blue-500 underline">
<GeneralUserMentionDisplay pubkey={pubkey} />
</span>
)}
</For>
<Show when={replyingToPubKeys().length > 0}>
<div class="text-xs">
{'Replying to '}
<For each={replyingToPubKeys()}>
{(pubkey: string) => (
<span class="pr-1 text-blue-500 underline">
<GeneralUserMentionDisplay pubkey={pubkey} />
</span>
)}
</For>
</div>
</Show>
<div class="content whitespace-pre-wrap break-all">
<TextNoteContentDisplay event={props.event} />
</div>
</Show>
<div class="content whitespace-pre-wrap break-all">
<TextNoteContentDisplay event={props.event} />
</div>
</div>
</ColumnItem>
</div>
);
};