feat: dashboard intro

src/pages/dashboard/column-zaps.tsx

@@ -2,29 +2,65 @@ import { ChatZap } from "@/element/live-chat";
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
 import { useEventReactions } from "@snort/system-react";
 import { useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, FormattedNumber } from "react-intl";
 import { DashboardCard } from "./card";
 import { DashboardHighlightZap } from "./zap-highlight";
+import ZapGlow from "./zap-glow";
+import { ShareMenu } from "@/element/share-menu";
 
-export function DashboardZapColumn({ link, feed }: { link: NostrLink; feed: Array<TaggedNostrEvent> }) {
+export function DashboardZapColumn({
+  ev,
+  link,
+  feed,
+}: {
+  ev: TaggedNostrEvent;
+  link: NostrLink;
+  feed: Array<TaggedNostrEvent>;
+}) {
   const reactions = useEventReactions(link, feed);
-
   const sortedZaps = useMemo(
     () => reactions.zaps.sort((a, b) => (b.created_at > a.created_at ? 1 : -1)),
     [reactions.zaps]
   );
   const latestZap = sortedZaps.at(0);
+  const zapSum = sortedZaps.reduce((acc, v) => acc + v.amount, 0);
+
   return (
-    <DashboardCard className="min-h-0 h-full flex flex-col gap-4">
-      <h3>
-        <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
-      </h3>
-      <div className="flex flex-col gap-2 overflow-y-scroll">
-        {latestZap && <DashboardHighlightZap zap={latestZap} />}
-        {sortedZaps.slice(1).map(a => (
-          <ChatZap zap={a} />
-        ))}
-      </div>
-    </DashboardCard>
+    <div className="flex flex-col gap-4">
+      <DashboardCard className="flex flex-col gap-2">
+        <div className="flex justify-between items-center">
+          <div className="flex gap-4 items-center">
+            <ZapGlow />
+            <h3>
+              <FormattedMessage defaultMessage="Stream Earnings" />
+            </h3>
+          </div>
+          <ShareMenu ev={ev} />
+        </div>
+        <div>
+          <FormattedMessage
+            defaultMessage="{n} sats"
+            values={{
+              n: (
+                <span className="text-3xl">
+                  <FormattedNumber value={zapSum} />
+                </span>
+              ),
+            }}
+          />
+        </div>
+      </DashboardCard>
+      <DashboardCard className="flex flex-col gap-4 grow">
+        <h3>
+          <FormattedMessage defaultMessage="Zaps" />
+        </h3>
+        <div className="flex flex-col gap-2 overflow-y-scroll">
+          {latestZap && <DashboardHighlightZap zap={latestZap} />}
+          {sortedZaps.slice(1).map(a => (
+            <ChatZap zap={a} />
+          ))}
+        </div>
+      </DashboardCard>
+    </div>
   );
 }