mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
/** @jsx h */
|
|
import { h } from "https://esm.sh/preact@10.17.1";
|
|
import { ProfileData } from "../features/profile.ts";
|
|
import {
|
|
cardBackgroundColor,
|
|
HintLinkColor,
|
|
HintTextColor,
|
|
LinkColor,
|
|
PrimaryTextColor,
|
|
} from "./style/colors.ts";
|
|
import { emitFunc } from "../event-bus.ts";
|
|
import { OpenNote, ViewUserDetail } from "./message-panel.tsx";
|
|
import { NostrEvent } from "../../libs/nostr.ts/nostr.ts";
|
|
import { PublicKey } from "../../libs/nostr.ts/key.ts";
|
|
|
|
export function NoteCard(props: {
|
|
profileData?: ProfileData;
|
|
event: NostrEvent;
|
|
emit: emitFunc<OpenNote | ViewUserDetail>;
|
|
publicKey: PublicKey;
|
|
}) {
|
|
const { profileData, event, emit, publicKey } = props;
|
|
const styles = {
|
|
container:
|
|
`px-4 mb-1 mobile:px-2 py-1 text-[${PrimaryTextColor}] rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] w-4/5 mobile:w-full`,
|
|
name: `truncate font-bold text-[${LinkColor}] text-base cursor-pointer hover:underline`,
|
|
content: `text-sm text-[${HintTextColor}] hover:underline cursor-pointer`,
|
|
};
|
|
|
|
const viewNoteDetail = () =>
|
|
emit({
|
|
type: "OpenNote",
|
|
event: event,
|
|
});
|
|
|
|
const viewUserDetail = () => {
|
|
emit({
|
|
type: "ViewUserDetail",
|
|
pubkey: publicKey,
|
|
});
|
|
};
|
|
|
|
const content = event.content.slice(0, 200);
|
|
|
|
return (
|
|
<div class={styles.container}>
|
|
<p class={styles.name} onClick={viewUserDetail}>
|
|
{profileData?.name || publicKey.bech32()}
|
|
</p>
|
|
<p onClick={viewNoteDetail} class={styles.content}>
|
|
{content}
|
|
{event.content.length > 200 ? "..." : ""}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|