From 5b5ac1be003fa7d61bec851c67a17217892c7815 Mon Sep 17 00:00:00 2001 From: zmeyer44 Date: Sun, 15 Oct 2023 19:04:54 -0400 Subject: [PATCH] testing live profs --- ...zontalCarousel.tsx => ExploreCreators.tsx} | 61 ++++++++++++++++- app/(app)/app/page.tsx | 16 +---- app/_providers/modal/leaflet.tsx | 2 +- components/CreatorCard/index.tsx | 67 ++++++++----------- constants/app.ts | 36 ++++++++++ 5 files changed, 126 insertions(+), 56 deletions(-) rename app/(app)/app/_sections/{HorizontalCarousel.tsx => ExploreCreators.tsx} (58%) create mode 100644 constants/app.ts diff --git a/app/(app)/app/_sections/HorizontalCarousel.tsx b/app/(app)/app/_sections/ExploreCreators.tsx similarity index 58% rename from app/(app)/app/_sections/HorizontalCarousel.tsx rename to app/(app)/app/_sections/ExploreCreators.tsx index 4bf66ee..6fe4a62 100644 --- a/app/(app)/app/_sections/HorizontalCarousel.tsx +++ b/app/(app)/app/_sections/ExploreCreators.tsx @@ -1,8 +1,32 @@ "use client"; import CreatorCard from "@/components/CreatorCard"; import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { RiArrowRightLine } from "react-icons/ri"; +import useEvents from "@/lib/hooks/useEvents"; +import useProfile from "@/lib/hooks/useProfile"; +import { nip19 } from "nostr-tools"; +import { EXPLORE_CREATORS } from "@/constants/app"; +import { getTagValues } from "@/lib/nostr/utils"; +import { NDKUserProfile } from "@nostr-dev-kit/ndk"; -export default function HorizontalCarousel() { +export default function ExploreCreators() { + return ( +
+
+

+ Explore Creators +

+ +
+ +
+ ); +} + +function HorizontalCarousel() { const cards = [ { banner: @@ -47,14 +71,45 @@ export default function HorizontalCarousel() { ]; return (
- {cards.map((creator, index) => ( + {EXPLORE_CREATORS.map((creator, index) => (
- +
))}
); } + +function Creator({ npub }: { npub: string }) { + const pubkey = nip19.decode(npub).data.toString(); + const { profile } = useProfile(pubkey); + const { events } = useEvents({ + filter: { + authors: [pubkey], + kinds: [30023, 9802], + limit: 5, + }, + }); + const recentWork = events.map((e) => ({ + id: e.id, + title: + getTagValues("title", e.tags) ?? + getTagValues("context", e.tags) ?? + getTagValues("alt", e.tags) ?? + "", + summary: + getTagValues("summary", e.tags) ?? getTagValues("r", e.tags) ?? e.content, + })); + + return ( + + ); +} diff --git a/app/(app)/app/page.tsx b/app/(app)/app/page.tsx index 22849ba..2fd66b4 100644 --- a/app/(app)/app/page.tsx +++ b/app/(app)/app/page.tsx @@ -1,6 +1,4 @@ -import { Button } from "@/components/ui/button"; -import HorizontalCarousel from "./_sections/HorizontalCarousel"; -import { RiArrowRightLine } from "react-icons/ri"; +import ExploreCreators from "./_sections/ExploreCreators"; import BecomeACreator from "./_sections/BecomeACreator"; import LiveStreamingSection from "./_sections/LiveStreaming"; import FeaturedListsSection from "./_sections/FeaturedLists"; @@ -9,17 +7,7 @@ import LongFormContentSection from "./_sections/LongFormContent"; export default function Page() { return (
-
-
-

- Explore Creators -

- -
- -
+ diff --git a/app/_providers/modal/leaflet.tsx b/app/_providers/modal/leaflet.tsx index 12ab8e5..f37d664 100644 --- a/app/_providers/modal/leaflet.tsx +++ b/app/_providers/modal/leaflet.tsx @@ -64,7 +64,7 @@ export default function Leaflet({
-
+
{children}
diff --git a/components/CreatorCard/index.tsx b/components/CreatorCard/index.tsx index 903b9b9..20ecb43 100644 --- a/components/CreatorCard/index.tsx +++ b/components/CreatorCard/index.tsx @@ -8,43 +8,30 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; +import { NDKUserProfile } from "@nostr-dev-kit/ndk"; +import { BANNER } from "@/constants/app"; +import { getNameToShow } from "@/lib/utils"; type CreatorCardProps = { - displayName: string; - about: string; - picture: string; - banner: string; + profile: NDKUserProfile; + npub: string; + recentWork: { + id: string; + title: string; + summary: string; + }[]; }; export default function CreatorCard({ - banner, - displayName, - picture, - about, + profile, + npub, + recentWork, }: CreatorCardProps) { - const recentEvents = [ - { - id: "test", - title: "How to start building a following on nostr.", - summary: - "Starting on a new protocol could be intinidating, But there is no reason to fret. I've got it all under control.", - }, - { - id: "asg", - title: "Jumping through relays", - summary: "Getting used to different relays and how to find them", - }, - { - id: "ant", - title: "Nostrasia is coming", - summary: "Time to start preping for Nostraisa.", - }, - ]; return ( background
- {displayName} + {getNameToShow({ profile, npub })} - {about} + {profile?.about} userRecent work: -
    - {recentEvents.map((item) => ( -
  • +
      + {recentWork.map((item) => ( +
    • -
      +

      {item.title}

      - {item.summary} + {item.summary ?? ""}

      -
      +
      diff --git a/constants/app.ts b/constants/app.ts new file mode 100644 index 0000000..8d3fb28 --- /dev/null +++ b/constants/app.ts @@ -0,0 +1,36 @@ +export const EXPLORE_CREATORS = [ + "npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s", + "npub1u6qhg5ucu3xza4nlz94q90y720tr6l09avnq8y3yfp5qrv9v8sus3tnd7t", + "npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m", + "npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk", + "npub1dc9p7jzjhj86g2uqgltq4qvnpkyfqn9r72kdlddcgyat3j05gnjsgjc8rz", + "npub1qny3tkh0acurzla8x3zy4nhrjz5zd8l9sy9jys09umwng00manysew95gx", + "npub17u5dneh8qjp43ecfxr6u5e9sjamsmxyuekrg2nlxrrk6nj9rsyrqywt4tp", + "npub1l2vyh47mk2p0qlsku7hg0vn29faehy9hy34ygaclpn66ukqp3afqutajft", +]; + +export const BANNER = + "https://o-0-o-image-storage.s3.amazonaws.com/poker-min_1_2_20.png"; +const highlight = { + created_at: 1697370024, + content: + "There are many myths concerning a great flood in the region. There was a first mention in the Epic of Gilgamesh, the Babylonian work. The Romans and Greeks had the legend of Deucalion and Pyrrha, who saved their children and animals by floating away in a giant box.", + tags: [ + [ + "r", + "https://www.theguardian.com/science/2000/sep/14/internationalnews.archaeology", + ], + [ + "context", + 'There are many myths concerning a great flood in the region. There was a first mention in the Epic of Gilgamesh, the Babylonian work. The Romans and Greeks had the legend of Deucalion and Pyrrha, who saved their children and animals by floating away in a giant box. The Hebrew book of Genesis most famously tells the story of Noah, who found grace in the eyes of the Lord, when all around him were wicked. Noah was warned of a forthcoming flood, and built a huge "ark" to hold his family and all the animals in pairs. Noah survived when all perished. Tradition has it that his ark came to rest on the slopes of Mount Ararat in Turkey.', + ], + [ + "alt", + '"There are many myths concerning a great flood in the region. There was a first mention in the Epic of Gilgamesh, the Babylonian work. The Romans and Greeks had the legend of Deucalion and Pyrrha, who saved their children and animals by floating away in a giant box."\n\nThis is a highlight created on https://highlighter.com', + ], + ], + kind: 9802, + pubkey: "b52cc839ac79c6ebe09d5bf7136b15c4fe9188f04ad483d4c4e001c8e0492cc4", + id: "7437c97845246b199ea3814a189b727740784db3378ed268cbc4820c36abd0ac", + sig: "a8730cf8bfcba73bdb0d07042de84956acd2e17ad6901f00047dc272ce0f6925a51ba4d25ef316836bdef93d5a0ab53b1d97d6c2af96806bb7e903e111d59643", +};