improving cards

components/CalendarContainers/SmallLineInfo.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import useProfile from "@/lib/hooks/useProfile";
+import { nip19 } from "nostr-tools";
+import { getLettersPlain } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { HiCalendarDays } from "react-icons/hi2";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { getTagValues } from "@/lib/nostr/utils";
+
+type SmallLineInfoProps = {
+  event: NDKEvent;
+};
+export default function SmallLineInfo({ event }: SmallLineInfoProps) {
+  const image = getTagValues("image", event.tags);
+  const name = getTagValues("name", event.tags);
+  return (
+    <Link
+      href={`/calendar/${event.encode()}`}
+      className="center group gap-x-2 rounded-sm rounded-r-full bg-background/50 pr-1 text-muted-foreground hover:shadow"
+    >
+      <Avatar className="center h-[16px] w-[16px] overflow-hidden rounded-[.25rem] bg-muted @sm:h-[18px] @sm:w-[18px]">
+        <AvatarImage src={image} alt={name ?? "event"} />
+        <AvatarFallback className="text-[8px]">
+          {getLettersPlain(name)}
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="flex items-center gap-1">
+        <span className="text-[12px] ">{name ?? "Calendar"}</span>
+        <HiCalendarDays className="h-3 w-3 text-primary" />
+      </div>
+    </Link>
+  );
+}
+
+export function LoadingProfileInfo() {
+  return (
+    <div className="center group gap-x-1">
+      <Avatar className="center h-[16px] w-[16px] overflow-hidden rounded-[.25rem] bg-muted @sm:h-[18px] @sm:w-[18px]"></Avatar>
+      <div className="space-y-1">
+        <Skeleton className="h-2 w-[70px] bg-muted" />
+      </div>
+    </div>
+  );
+}

components/Cards/CalendarEvent/LargeFeedCard.tsx

@@ -1,8 +1,11 @@
+"use client";
+import { useState, useEffect } from "react";
 import { formatDate, fromUnix } from "@/lib/utils/dates";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { nip19 } from "nostr-tools";
 import {
   Card,
   CardContent,
@@ -12,7 +15,8 @@ import {
 } from "@/components/ui/card";
 import SmallProfileLine from "@/components/ProfileContainers/SmallProfileLine";
 import AvatarStack from "@/components/ProfileContainers/AvatarStack";
-import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { type NDKEvent, type NDKKind } from "@nostr-dev-kit/ndk";
+import { useNDK } from "@/app/_providers/ndk";
 import {
   getTagValues,
   getTagAllValues,
@@ -22,6 +26,7 @@ import { HiOutlineMapPin, HiOutlineUserCircle } from "react-icons/hi2";
 import { RxClock, RxCalendar } from "react-icons/rx";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
+import SmallLineInfo from "@/components/CalendarContainers/SmallLineInfo";
 
 type LargeFeedCardProps = {
   event: NDKEvent;
@@ -33,7 +38,6 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
   const location =
     getTagValues("location", tags) ?? getTagValues("address", tags);
   const users = getTagsValues("p", tags).filter(Boolean);
-  console.log("Users", users);
   const startDate = getTagValues("start", tags)
     ? new Date(parseInt(getTagValues("start", tags) as string) * 1000)
     : null;
@@ -161,3 +165,40 @@ export function LoadingCard() {
     </Card>
   );
 }
+
+function CalendarLine({ eventReference }: { eventReference: string }) {
+  const { type, data } = nip19.decode(eventReference);
+  if (type !== "naddr") {
+    throw new Error("Invalid list");
+  }
+  const { pubkey } = data;
+  const { ndk } = useNDK();
+  const [event, setEvent] = useState<NDKEvent>();
+  const [isFetching, setIsFetching] = useState(false);
+
+  useEffect(() => {
+    if (!ndk || isFetching || event) return;
+    handleFetchEvent();
+  }, [ndk, eventReference]);
+  async function handleFetchEvent() {
+    if (!ndk) return;
+    setIsFetching(true);
+
+    const calendarEvent = await ndk
+      .fetchEvent({
+        authors: [pubkey],
+        ["#a"]: [eventReference],
+        kinds: [31924 as NDKKind],
+      })
+      .catch((err) => console.log("err"));
+    if (calendarEvent) {
+      console.log("Found calendar", calendarEvent);
+      setEvent(calendarEvent);
+    }
+    setIsFetching(false);
+  }
+  if (!event) {
+    return <SmallProfileLine pubkey={pubkey} />;
+  }
+  return <SmallLineInfo event={event} />;
+}

components/Cards/CalendarEvent/index.tsx

@@ -70,7 +70,7 @@ export default function CalendarEventCard({
             height={150}
             unoptimized
             className={cn(
-              "h-auto w-auto  object-cover transition-all group-hover:scale-105",
+              "h-auto w-auto min-w-full object-cover transition-all group-hover:scale-105",
               "aspect-video",
             )}
           />