nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

update note metadata

Browse Source
This commit is contained in:
Ren Amamiya 2023-05-16 11:10:08 +07:00
parent 7e8e5a931b
commit 064700bd5d
5 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/note/components/metadata.tsx
View File

@ -4,6 +4,8 @@ import NoteRepost from "@app/note/components/metadata/repost";
import { RelayContext } from "@shared/relayProvider";
import NoteZap from "@app/note/components/metadata/zap";
import PlusIcon from "@shared/icons/plus";
import { Tooltip } from "@shared/tooltip";
import { READONLY_RELAYS } from "@stores/constants";
import { decode } from "light-bolt11-decoder";
import { useContext, useState } from "react";
@ -61,10 +63,20 @@ export default function NoteMetadata({
});
return (
<div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
<div className="mt-4 flex h-12 items-center justify-between border-t border-zinc-800/50">
<div className="flex items-center gap-16">
<NoteReply id={id} replies={replies} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
<NoteZap zaps={zaps} />
</div>
<Tooltip message="Save to Space">
<button
type="button"
className="inline-flex w-4 h-4 rounded justify-center items-center gap-1 hover:bg-zinc-800"
>
<PlusIcon className="w-3 h-3 text-zinc-400" />
</button>
</Tooltip>
</div>
);
}

5
src/app/note/components/metadata/reply.tsx
View File

@ -9,6 +9,7 @@ import { dateToUnix } from "@utils/date";
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
import { Dialog, Transition } from "@headlessui/react";
import { compactNumber } from "@utils/number";
import { getEventHash, signEvent } from "nostr-tools";
import { Fragment, useContext, useEffect, useState } from "react";
@ -64,7 +65,7 @@ export default function NoteReply({
<button
type="button"
onClick={() => openModal()}
className="group inline-flex items-center gap-1.5"
className="w-20 group inline-flex items-center gap-1.5"
>
<ReplyIcon
width={16}
@ -72,7 +73,7 @@ export default function NoteReply({
className="text-zinc-400 group-hover:text-green-400"
/>
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
{count}
{compactNumber.format(count)}
</span>
</button>
<Transition appear show={isOpen} as={Fragment}>

5
src/app/note/components/metadata/repost.tsx
View File

@ -7,6 +7,7 @@ import { WRITEONLY_RELAYS } from "@stores/constants";
import { dateToUnix } from "@utils/date";
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
import { compactNumber } from "@utils/number";
import { getEventHash, signEvent } from "nostr-tools";
import { useContext, useEffect, useState } from "react";
@ -53,7 +54,7 @@ export default function NoteRepost({
<button
type="button"
onClick={(e) => submitEvent(e)}
className="group inline-flex items-center gap-1.5"
className="w-20 group inline-flex items-center gap-1.5"
>
<RepostIcon
width={16}
@ -61,7 +62,7 @@ export default function NoteRepost({
className="text-zinc-400 group-hover:text-blue-400"
/>
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
{count}
{compactNumber.format(count)}
</span>
</button>
);

9
src/app/note/components/metadata/zap.tsx
View File

@ -1,11 +1,8 @@
import ZapIcon from "@shared/icons/zap";
import { useEffect, useMemo, useState } from "react";
import { compactNumber } from "@utils/number";
import { useEffect, useState } from "react";
export default function NoteZap({ zaps }: { zaps: number }) {
const formatter = useMemo(
() => Intl.NumberFormat("en", { notation: "compact" }),
[],
);
const [count, setCount] = useState(0);
useEffect(() => {
@ -20,7 +17,7 @@ export default function NoteZap({ zaps }: { zaps: number }) {
className="text-zinc-400 group-hover:text-orange-400"
/>
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
{formatter.format(count)} sats
{compactNumber.format(count)} sats
</span>
</button>
);

2
src/utils/number.tsx Normal file
View File

@ -0,0 +1,2 @@
// convert number to K, M, B, T, etc.
export const compactNumber = Intl.NumberFormat("en", { notation: "compact" });