From de586251a7a8e7eb2da8f902020b8b1f3981be99 Mon Sep 17 00:00:00 2001 From: zmeyer44 Date: Mon, 16 Oct 2023 13:01:46 -0400 Subject: [PATCH] better lists --- app/(app)/app/_sections/FeaturedLists.tsx | 132 ++++++---------- app/(app)/app/_sections/LiveStreaming.tsx | 3 +- app/(app)/article/[key]/@30311/layout.tsx | 2 +- components/CreatorCard/index.tsx | 2 +- components/KindCard/30311.tsx | 8 +- components/KindCard/components/Container.tsx | 2 +- components/ListCard/index.tsx | 154 +++++++++++++++++++ components/VideoCard/index.tsx | 4 +- constants/app.ts | 1 + lib/nostr/utils.ts | 23 ++- 10 files changed, 234 insertions(+), 97 deletions(-) create mode 100644 components/ListCard/index.tsx diff --git a/app/(app)/app/_sections/FeaturedLists.tsx b/app/(app)/app/_sections/FeaturedLists.tsx index 2af19b1..c01287f 100644 --- a/app/(app)/app/_sections/FeaturedLists.tsx +++ b/app/(app)/app/_sections/FeaturedLists.tsx @@ -1,4 +1,5 @@ "use client"; +import Link from "next/link"; import { Section, SectionHeader, @@ -15,108 +16,65 @@ import { CardTitle, } from "@/components/ui/card"; import Image from "next/image"; -import { cn } from "@/lib/utils"; -import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar"; +import { cn, formatNumber, getTwoLetters } from "@/lib/utils"; import { Badge } from "@/components/ui/badge"; import { AspectRatio } from "@/components/ui/aspect-ratio"; +import useEvents from "@/lib/hooks/useEvents"; +import { Event } from "nostr-tools"; +import KindLoading from "@/components/KindCard/loading"; +import { nip19 } from "nostr-tools"; +import { getTagValues, getTagsValues } from "@/lib/nostr/utils"; +import { NOTABLE_ACCOUNTS } from "@/constants"; +import { type NDKKind } from "@nostr-dev-kit/ndk"; +import { uniqBy } from "ramda"; +import useProfile from "@/lib/hooks/useProfile"; +import ListCard from "@/components/ListCard"; + export default function FeaturedLists() { - const demo = [ - { - id: 1, - title: "BTC Radio", - picture: - "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530", - tags: ["music", "crypto", "art"], + const { events } = useEvents({ + filter: { + kinds: [30001 as NDKKind], + authors: NOTABLE_ACCOUNTS.map((a) => nip19.decode(a).data.toString()), + limit: 50, }, - { - id: 2, - title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", - picture: - "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/31095.thumbnail.png?1692203850", - tags: ["NFTs", "crypto", "art", "trading"], - }, - { - id: 3, - title: "Space Talk: What's Elon up to?", - picture: - "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40088.original.png?1692206315", - tags: ["Space"], - }, - { - id: 4, - title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", - picture: - "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40680.original.png?1692206434", - tags: ["Market"], - }, - ]; + }); + + const processedEvents = events + .sort((a, b) => { + const aTitle = + getTagValues("title", a.tags) ?? + getTagValues("description", a.tags) ?? + a.content; + const bTitle = + getTagValues("title", b.tags) ?? + getTagValues("description", b.tags) ?? + b.content; + const aTitleLength = aTitle?.split(" ").length ?? 0; + const bTitleLength = bTitle?.split(" ").length ?? 0; + if (aTitleLength && bTitleLength) { + if (aTitleLength < bTitleLength) { + return 1; + } else return -1; + } + if (bTitleLength) return 1; + return -1; + }) + .slice(0, 6); + return (
Featured Lists + {processedEvents.length}
- {demo.map((e) => ( - -
- - {e.title} - -
- -
- - - SC - -
-
-
-
- - {e.title} - - - Here is my description of this list that I am offering - -
-
- 100 subs -
-
-
-
-
2k sats
-
- /month -
-
- - Free - -
-
- - + {processedEvents.map((e) => ( + ))}
diff --git a/app/(app)/app/_sections/LiveStreaming.tsx b/app/(app)/app/_sections/LiveStreaming.tsx index d505517..adf9b5f 100644 --- a/app/(app)/app/_sections/LiveStreaming.tsx +++ b/app/(app)/app/_sections/LiveStreaming.tsx @@ -17,7 +17,7 @@ import KindLoading from "@/components/KindCard/loading"; import { nip19 } from "nostr-tools"; import { getTagValues, getTagsValues } from "@/lib/nostr/utils"; import { NOTABLE_ACCOUNTS } from "@/constants"; -import { NDKKind } from "@nostr-dev-kit/ndk"; +import { type NDKKind } from "@nostr-dev-kit/ndk"; import { uniqBy } from "ramda"; export default function LiveStreamingSection() { @@ -67,7 +67,6 @@ export default function LiveStreamingSection() { .filter((e) => !!getTagValues("summary", e.tags)) .slice(0, 6) .map((e, idx) => { - if (idx > 6) return null; const event = e.rawEvent() as Event; const image = getTagValues("image", event.tags) as string; const title = getTagValues("title", event.tags) as string; diff --git a/app/(app)/article/[key]/@30311/layout.tsx b/app/(app)/article/[key]/@30311/layout.tsx index 5bee456..04a9f4a 100644 --- a/app/(app)/article/[key]/@30311/layout.tsx +++ b/app/(app)/article/[key]/@30311/layout.tsx @@ -15,7 +15,7 @@ export default function Layout(props: { }) { const router = useRouter(); const { data, type } = nip19.decode(props.params.key); - const pubkey = type === "nevent" ? data.author ?? "" : ""; + const pubkey = type === "naddr" ? data.pubkey ?? "" : ""; const { profile } = useProfile(pubkey); const npub = nip19.npubEncode(pubkey); return ( diff --git a/components/CreatorCard/index.tsx b/components/CreatorCard/index.tsx index 4e0ecdb..37666f5 100644 --- a/components/CreatorCard/index.tsx +++ b/components/CreatorCard/index.tsx @@ -56,7 +56,7 @@ export default function CreatorCard({ profile?.picture ?? `https://bitcoinfaces.xyz/api/get-image?name=${npub}&onchain=false` } - className="absolute left-1/2 top-1/2 aspect-square -translate-x-1/2 -translate-y-[70%] transform overflow-hidden rounded-lg object-cover transition-all duration-300 group-hover:left-[50px] group-hover:top-[65px] group-hover:w-[70px]" + className="absolute left-1/2 top-1/2 aspect-square -translate-x-1/2 -translate-y-[70%] transform overflow-hidden rounded-lg bg-muted object-cover transition-all duration-300 group-hover:left-[50px] group-hover:top-[65px] group-hover:w-[70px]" height={100} width={100} unoptimized diff --git a/components/KindCard/30311.tsx b/components/KindCard/30311.tsx index be9dc63..0cb531c 100644 --- a/components/KindCard/30311.tsx +++ b/components/KindCard/30311.tsx @@ -7,7 +7,6 @@ import { toast } from "sonner"; import { copyText } from "@/lib/utils"; import { RenderText } from "../TextRendering"; import { getTagValues, getTagsValues } from "@/lib/nostr/utils"; -import LinkCard from "@/components/LinkCard"; import ReactPlayer from "react-player"; export default function Kind30311(props: Event) { @@ -40,7 +39,12 @@ export default function Kind30311(props: Event) { }, ]} > - +
{!!title && {title}} {!!summary && {summary}} diff --git a/components/KindCard/components/Container.tsx b/components/KindCard/components/Container.tsx index 1d04f30..7d9ad1b 100644 --- a/components/KindCard/components/Container.tsx +++ b/components/KindCard/components/Container.tsx @@ -45,7 +45,7 @@ export default function Container({
{!!createdAt && - formatDate(new Date(createdAt * 1000), "MMM Do, h:m a")} + formatDate(new Date(createdAt * 1000), "MMM Do, h:mm a")}