testing live profs

2023-10-15 19:04:54 -04:00 · 2023-10-15 19:04:54 -04:00 · 5b5ac1be00
commit 5b5ac1be00
parent f25b3a8e29
5 changed files with 126 additions and 56 deletions
--- a/app/(app)/app/_sections/HorizontalCarousel.tsx
+++ b/app/(app)/app/_sections/HorizontalCarousel.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 (
+    <section className="relative -mx-5 space-y-4 overflow-x-hidden sm:space-y-6">
+      <div className="flex items-center justify-between px-5 max-sm:pr-3">
+        <h2 className="font-condensed text-2xl font-bold sm:text-3xl">
+          Explore Creators
+        </h2>
+        <Button variant={"ghost"}>
+          View all <RiArrowRightLine className="ml-1 h-4 w-4" />
+        </Button>
+      </div>
+      <HorizontalCarousel />
+    </section>
+  );
+}
+
+function HorizontalCarousel() {
  const cards = [
    {
      banner:
@ -47,14 +71,45 @@ export default function HorizontalCarousel() {
  ];
  return (
    <div className="scrollbar-thumb-rounded-full mr-auto flex min-w-0 max-w-full snap-x snap-mandatory overflow-x-auto pl-5 pr-[50vw] scrollbar-thin sm:pr-[200px]">
-      {cards.map((creator, index) => (
+      {EXPLORE_CREATORS.map((creator, index) => (
        <div
          key={index}
          className={cn("snap-start pl-2 sm:pl-5", index === 0 && "pl-5")}
        >
-          <CreatorCard key={creator.displayName} {...creator} />
+          <Creator npub={creator} />
        </div>
      ))}
    </div>
  );
 }
+
+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 (
+    <CreatorCard
+      recentWork={recentWork}
+      key={pubkey}
+      profile={profile}
+      npub={npub}
+    />
+  );
+}
--- 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 (
    <div className="relative space-y-6 pt-5 sm:pt-7">
-      <section className="relative -mx-5 space-y-4 overflow-x-hidden sm:space-y-6">
-        <div className="flex items-center justify-between px-5 max-sm:pr-3">
-          <h2 className="font-condensed text-2xl font-bold sm:text-3xl">
-            Explore Creators
-          </h2>
-          <Button variant={"ghost"}>
-            View all <RiArrowRightLine className="ml-1 h-4 w-4" />
-          </Button>
-        </div>
-        <HorizontalCarousel />
-      </section>
+      <ExploreCreators />
      <LongFormContentSection />
      <BecomeACreator />
      <LiveStreamingSection />
--- a/app/_providers/modal/leaflet.tsx
+++ b/app/_providers/modal/leaflet.tsx
@ -64,7 +64,7 @@ export default function Leaflet({
          <div className="-mr-1 h-1 w-6 rounded-full bg-muted transition-all group-active:rotate-12" />
          <div className="h-1 w-6 rounded-full bg-muted transition-all group-active:-rotate-12" />
        </div>
-        <div className="scrollbar-muted-foreground max-h-[calc(95vh_-_28px)] w-full overflow-y-auto scrollbar-track-background">
+        <div className="bottom-tabs scrollbar-muted-foreground max-h-[calc(95vh_-_28px)] w-full overflow-y-auto scrollbar-track-background">
          {children}
        </div>
      </motion.div>
--- 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 (
    <Card className="relative h-[350px] w-[250px] min-w-[250] overflow-hidden">
      <Image
        alt="background"
-        src={banner}
+        src={profile?.banner ?? BANNER}
        className="absolute inset-0 object-cover"
        fill
        unoptimized
@ -52,14 +39,18 @@ export default function CreatorCard({
      <div className="absolute inset-0 bg-background/60 backdrop-blur-md transition-all">
        <div className="group relative flex h-full w-full flex-col items-center justify-end transition-all">
          <CardHeader className="absolute inset-x-0 top-[59%] transform pt-4 text-center transition-all duration-300 group-hover:top-[8px] group-hover:ml-[75px] group-hover:text-left">
-            <CardTitle>{displayName}</CardTitle>
+            <CardTitle>{getNameToShow({ profile, npub })}</CardTitle>
            <CardDescription className="line-clamp-3 group-hover:text-xs">
-              {about}
+              {profile?.about}
            </CardDescription>
          </CardHeader>
          <Image
            alt="user"
-            src={picture}
+            src={
+              profile?.image ??
+              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]"
            height={100}
            width={100}
@ -70,22 +61,22 @@ export default function CreatorCard({
              <CardTitle>Recent work:</CardTitle>
            </CardHeader>
            <CardContent className="overflow-hidden px-0">
-              <ul>
-                {recentEvents.map((item) => (
-                  <li key={item.id} className="overflow-hidden">
+              <ul className="w-full">
+                {recentWork.map((item) => (
+                  <li key={item.id} className="w-full overflow-hidden">
                    <Link
-                      href={""}
-                      className="flex max-w-fit items-center justify-between overflow-hidden py-1.5 pl-4 pr-2 transition-colors hover:bg-muted hover:text-primary"
+                      href={`/${item.id}`}
+                      className="flex max-w-full items-center justify-between overflow-hidden py-1.5 pl-4 pr-2 transition-colors hover:bg-muted hover:text-primary"
                    >
-                      <div className="shrink">
+                      <div className="shrink overflow-x-hidden">
                        <h4 className="line-clamp-1 text-sm font-semibold text-card-foreground">
                          {item.title}
                        </h4>
                        <p className="line-clamp-2 text-[10px] leading-4 text-muted-foreground">
-                          {item.summary}
+                          {item.summary ?? ""}
                        </p>
                      </div>
-                      <div className="center shrink-0 pl-2">
+                      <div className="center ml-auto shrink-0 pl-2">
                        <RiArrowRightLine className="h-5 w-5" />
                      </div>
                    </Link>
--- a/constants/app.ts
+++ 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",
+};