Trending kind20 (#49)

* new trending images (kind 20)

app/page.tsx

@@ -3,6 +3,7 @@
 import { Search } from "@/components/Search";
 import { TrendingAccounts } from "@/components/TrendingAccounts";
 import { TrendingImages } from "@/components/TrendingImages";
+import { TrendingImagesNew } from "@/components/TrendingImagesNew";
 import { useEffect } from "react";
 
 
@@ -17,7 +18,8 @@ export default function Home() {
         <Search />
       </div>
       {/* <TrendingAccounts /> */}
-      <TrendingImages />
+      {/* <TrendingImages /> */}
+      <TrendingImagesNew />
     </>
   );
 }

components/TrendingImageNew.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useProfile } from "nostr-react";
+import { nip19 } from "nostr-tools";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  SmallCardContent,
+} from "@/components/ui/card"
+import Link from 'next/link';
+import { Avatar } from './ui/avatar';
+import { AvatarImage } from '@radix-ui/react-avatar';
+
+interface TrendingImageNewProps {
+  event: {
+    id: string;
+    pubkey: string;
+    content: string;
+    created_at: string;
+    tags: Array<string[]>;
+  }
+}
+
+const TrendingImageNew: React.FC<TrendingImageNewProps> = ({ event }) => {
+  const { data: userData } = useProfile({
+    pubkey: event.pubkey,
+  });
+
+  const npubShortened = (() => {
+    let encoded = nip19.npubEncode(event.pubkey);
+    let parts = encoded.split('npub');
+    return 'npub' + parts[1].slice(0, 4) + ':' + parts[1].slice(-3);
+  })();
+
+  const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || npubShortened;
+  const text = event.content.replaceAll('\n', ' ');
+  
+  // Get image URL from imeta tags
+  const imageUrl = event.tags.find(tag => tag[0] === 'imeta' && tag[1]?.startsWith('url '))
+    ?.slice(1)[0]?.replace('url ', '');
+
+  const hrefProfile = `/profile/${nip19.npubEncode(event.pubkey)}`;
+  const hrefNote = `/note/${nip19.noteEncode(event.id)}`;
+  const profileImageSrc = userData?.picture || "https://robohash.org/" + event.pubkey;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Link href={hrefProfile} style={{ textDecoration: 'none' }}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Avatar>
+                <AvatarImage src={profileImageSrc} />
+              </Avatar>
+              <span className='break-all' style={{ marginLeft: '10px' }}>{title}</span>
+            </div>
+          </Link>
+        </CardTitle>
+      </CardHeader>
+      <SmallCardContent>
+        <div className='p-2'>
+          <div className='d-flex justify-content-center align-items-center'>
+            {imageUrl && (
+              <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
+                <Link href={hrefNote}>
+                  <img src={imageUrl} className='rounded lg:rounded-lg' style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={text} />
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+      </SmallCardContent>
+    </Card>
+  );
+}
+
+export default TrendingImageNew;

components/TrendingImagesNew.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import TrendingImage from '@/components/TrendingImageNew';
+import { Spinner } from '@/components/spinner';
+
+export function TrendingImagesNew() {
+    const [events, setEvents] = useState<any[]>([]);
+
+    useEffect(() => {
+        // TODO: Fetch trending images from luminas own relay via http call
+        fetch('https://relay.lumina.rocks/api/trending/kind20')
+            .then(res => res.json())
+            .then(data => setEvents(data.trending))
+            .catch(error => {
+                console.error('Error calling trending images:', error);
+            });
+    }, []);
+
+    return (
+        <div className="flex flex-col items-center py-6 px-6">
+            <h1 className="text-3xl font-bold">Currently Trending</h1>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
+                {events && events.length > 0 ? (
+                    events.map((event, index) => (
+                        <TrendingImage key={event.id} event={event} />
+                    ))
+                ) : (
+                    <div className="col-span-full text-center py-8 text-lg flex flex-col items-center gap-4">
+                        <Spinner />
+                        Curating Trending Images for you.. 💜
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}