add GlobalQuickViewFeed (#46)

app/global/page.tsx

@@ -1,6 +1,9 @@
 "use client";
 
 import GlobalFeed from "@/components/GlobalFeed";
+import GlobalQuickViewFeed from "@/components/GlobalQuickViewFeed";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { GridIcon, SectionIcon } from "@radix-ui/react-icons";
 import { useEffect } from "react";
 
 export default function GlobalFeedPage() {
@@ -11,7 +14,19 @@ export default function GlobalFeedPage() {
 
   return (
     <div className="py-4 px-2 md:py-6 md:px-6">
-      <GlobalFeed />
+      <h2 className="text-2xl font-bold mb-4">Global Feed</h2>
+      <Tabs defaultValue="GlobalQuickViewFeed">
+        <TabsList className="mb-4">
+          <TabsTrigger value="GlobalQuickViewFeed"><GridIcon /></TabsTrigger>
+          <TabsTrigger value="GlobalFeed"><SectionIcon /></TabsTrigger>
+        </TabsList>
+        <TabsContent value="GlobalQuickViewFeed">
+          <GlobalQuickViewFeed />
+        </TabsContent>
+        <TabsContent value="GlobalFeed">
+          <GlobalFeed />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

components/GlobalFeed.tsx

@@ -21,7 +21,6 @@ const GlobalFeed: React.FC = () => {
 
   return (
     <>
-      <h2 className="text-2xl font-bold mb-4 px-2 md:px-4">Global Feed</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 px-2 md:px-4">
         {events.map((event) => {
           const imageUrl = getImageUrl(event.tags);

components/GlobalQuickViewFeed.tsx

@@ -0,0 +1,72 @@
+import { useRef, useState } from "react";
+import { useNostrEvents } from "nostr-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import QuickViewKind20NoteCard from "./QuickViewKind20NoteCard";
+import { getImageUrl } from "@/utils/utils";
+
+const GlobalQuickViewFeed: React.FC = () => {
+  const now = useRef(new Date());
+  const [limit, setLimit] = useState(25);
+
+  const { events, isLoading } = useNostrEvents({
+    filter: {
+      limit: limit,
+      kinds: [20],
+      since: Math.floor((now.current.getTime() - 24 * 60 * 60 * 1000) / 1000), // Last 24 hours
+    },
+  });
+
+  const loadMore = () => {
+    setLimit(prevLimit => prevLimit + 25);
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-3 gap-2">
+        {events.length === 0 && isLoading ? (
+          <>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-[33vh] rounded-xl" />
+            </div>
+          </>
+        ) : (
+          events.map((event) => (
+            <QuickViewKind20NoteCard
+              key={event.id}
+              pubkey={event.pubkey}
+              text={event.content}
+              image={getImageUrl(event.tags)}
+              event={event}
+              tags={event.tags}
+              eventId={event.id}
+              linkToNote={true}
+            />
+          ))
+        )}
+      </div>
+      {!isLoading && (
+        <div className="flex justify-center p-4">
+          <Button className="w-full md:w-auto" onClick={loadMore}>Load More</Button>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default GlobalQuickViewFeed;