forked from Kieran/snort
smaller trending notes
This commit is contained in:
parent
e8abd5ac09
commit
468dc3bae6
19
packages/app/src/Element/Trending/ShortNote.tsx
Normal file
19
packages/app/src/Element/Trending/ShortNote.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
|
import ProfileImage from "@/Element/User/ProfileImage";
|
||||||
|
import Text from "@/Element/Text";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import NoteTime from "@/Element/Event/NoteTime";
|
||||||
|
|
||||||
|
export default function ShortNote({ event }: { event: TaggedNostrEvent }) {
|
||||||
|
return (
|
||||||
|
<Link to={`/${NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix)}`} className="flex flex-col">
|
||||||
|
<div className="flex flex-row justify-between">
|
||||||
|
<ProfileImage pubkey={event.pubkey} size={32} showNip05={false} />
|
||||||
|
<NoteTime from={event.created_at * 1000} />
|
||||||
|
</div>
|
||||||
|
<div className="ml-10">
|
||||||
|
<Text {...event} truncate={75} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
@ -8,6 +8,8 @@ import NostrBandApi from "@/External/NostrBand";
|
|||||||
import { ErrorOrOffline } from "@/Element/ErrorOrOffline";
|
import { ErrorOrOffline } from "@/Element/ErrorOrOffline";
|
||||||
import { useLocale } from "@/IntlProvider";
|
import { useLocale } from "@/IntlProvider";
|
||||||
import useModeration from "@/Hooks/useModeration";
|
import useModeration from "@/Hooks/useModeration";
|
||||||
|
import ShortNote from "@/Element/Trending/ShortNote";
|
||||||
|
import classNames from "classnames";
|
||||||
|
|
||||||
export default function TrendingNotes({ count = Infinity, small = false }) {
|
export default function TrendingNotes({ count = Infinity, small = false }) {
|
||||||
// Added count prop with a default value
|
// Added count prop with a default value
|
||||||
@ -45,13 +47,17 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-4">
|
<div className={classNames("flex flex-col", { "gap-4": small, "py-4": small })}>
|
||||||
{posts
|
{posts
|
||||||
.filter(a => !isEventMuted(a))
|
.filter(a => !isEventMuted(a))
|
||||||
.slice(0, count) // Limit the number of posts displayed
|
.slice(0, count) // Limit the number of posts displayed
|
||||||
.map(e => (
|
.map(e =>
|
||||||
|
small ? (
|
||||||
|
<ShortNote key={e.id} event={e as TaggedNostrEvent} />
|
||||||
|
) : (
|
||||||
<Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
|
<Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
|
||||||
))}
|
),
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -15,11 +15,11 @@ export default function RightColumn() {
|
|||||||
<SearchBox />
|
<SearchBox />
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-y-auto hide-scrollbar">
|
<div className="overflow-y-auto hide-scrollbar">
|
||||||
<div className="bg-superdark rounded-lg py-4 px-2 mt-8">
|
<div className="bg-superdark rounded-lg p-4 mt-8 text-neutral-500">
|
||||||
<div className="font-bold text-lg px-[12px]">
|
<div className="font-bold text-lg">
|
||||||
<FormattedMessage defaultMessage="Trending notes" id="6k7xfM" />
|
<FormattedMessage defaultMessage="Trending notes" id="6k7xfM" />
|
||||||
</div>
|
</div>
|
||||||
<TrendingNotes small={true} count={5} />
|
<TrendingNotes small={true} count={100} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user