@nordsym/apiclaw 1.2.2 → 1.2.3

package/landing/src/components/ShareIntegrationModal.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useState } from "react";
+import { X, Twitter, Linkedin, Copy, Check, ExternalLink } from "lucide-react";
+
+interface ShareIntegrationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  providerName: string;
+  apiName: string;
+  apiSlug: string;
+  description?: string;
+}
+
+export function ShareIntegrationModal({
+  isOpen,
+  onClose,
+  providerName,
+  apiName,
+  apiSlug,
+  description,
+}: ShareIntegrationModalProps) {
+  const [copiedBadge, setCopiedBadge] = useState(false);
+  const [copiedLink, setCopiedLink] = useState(false);
+
+  if (!isOpen) return null;
+
+  const providerUrl = `https://apiclaw.com/providers/${apiSlug}`;
+  
+  const twitterText = `🦞 ${apiName} is now on @APIClaw!
+
+AI agents can integrate our API in seconds.
+
+${description || "Check it out:"}
+
+${providerUrl}
+
+#AI #API #AIAgents`;
+
+  const linkedinText = `Excited to announce that ${providerName} is now available on APIClaw — the API layer for autonomous AI agents.
+
+This means AI agents can now integrate ${apiName} directly into their workflows.
+
+We're proud to be among the first providers on this platform. The future of API consumption is autonomous.
+
+🦞 ${providerUrl}`;
+
+  const badgeCode = `<a href="${providerUrl}" target="_blank" rel="noopener">
+  <img src="https://apiclaw.com/badges/available-on-apiclaw.svg" 
+       alt="Available on APIClaw" 
+       width="220" height="44" />
+</a>`;
+
+  const handleTwitterShare = () => {
+    const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(twitterText)}`;
+    window.open(url, "_blank", "width=550,height=420");
+  };
+
+  const handleLinkedInShare = () => {
+    const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(providerUrl)}`;
+    window.open(url, "_blank", "width=550,height=420");
+  };
+
+  const handleCopyBadge = async () => {
+    await navigator.clipboard.writeText(badgeCode);
+    setCopiedBadge(true);
+    setTimeout(() => setCopiedBadge(false), 2000);
+  };
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(providerUrl);
+    setCopiedLink(true);
+    setTimeout(() => setCopiedLink(false), 2000);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      
+      {/* Modal */}
+      <div className="relative bg-surface-elevated border border-border rounded-2xl p-8 max-w-lg w-full mx-4 shadow-2xl">
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-2 text-text-muted hover:text-text rounded-lg hover:bg-surface transition-colors"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="text-5xl mb-4">🎉</div>
+          <h2 className="text-2xl font-bold mb-2">You're Live on APIClaw!</h2>
+          <p className="text-text-muted">
+            AI agents can now discover and use {apiName}.
+          </p>
+        </div>
+
+        {/* Share section */}
+        <div className="space-y-6">
+          <div>
+            <h3 className="font-semibold mb-3">Share the news</h3>
+            <div className="flex gap-3">
+              <button
+                onClick={handleTwitterShare}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-[#1DA1F2] hover:bg-[#1a8cd8] text-white rounded-xl transition-colors font-medium"
+              >
+                <Twitter className="w-5 h-5" />
+                Twitter
+              </button>
+              <button
+                onClick={handleLinkedInShare}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-[#0A66C2] hover:bg-[#094d92] text-white rounded-xl transition-colors font-medium"
+              >
+                <Linkedin className="w-5 h-5" />
+                LinkedIn
+              </button>
+            </div>
+          </div>
+
+          {/* Badge section */}
+          <div>
+            <h3 className="font-semibold mb-3">Add badge to your site</h3>
+            <div className="bg-surface rounded-xl p-4 border border-border">
+              {/* Badge preview */}
+              <div className="flex justify-center mb-4 p-4 bg-white/5 rounded-lg">
+                <img 
+                  src="/badges/available-on-apiclaw.svg" 
+                  alt="Available on APIClaw badge"
+                  width={220}
+                  height={44}
+                />
+              </div>
+              {/* Code */}
+              <div className="relative">
+                <pre className="text-xs text-text-muted bg-black/30 rounded-lg p-3 overflow-x-auto">
+                  {badgeCode}
+                </pre>
+                <button
+                  onClick={handleCopyBadge}
+                  className="absolute top-2 right-2 p-2 bg-surface-elevated hover:bg-surface rounded-lg transition-colors"
+                >
+                  {copiedBadge ? (
+                    <Check className="w-4 h-4 text-green-500" />
+                  ) : (
+                    <Copy className="w-4 h-4 text-text-muted" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Direct link */}
+          <div>
+            <h3 className="font-semibold mb-3">Your provider page</h3>
+            <div className="flex gap-2">
+              <div className="flex-1 px-4 py-3 bg-surface rounded-xl border border-border text-sm text-text-muted truncate">
+                {providerUrl}
+              </div>
+              <button
+                onClick={handleCopyLink}
+                className="px-4 py-3 bg-surface hover:bg-surface-elevated border border-border rounded-xl transition-colors"
+              >
+                {copiedLink ? (
+                  <Check className="w-5 h-5 text-green-500" />
+                ) : (
+                  <Copy className="w-5 h-5 text-text-muted" />
+                )}
+              </button>
+              <a
+                href={providerUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-4 py-3 bg-surface hover:bg-surface-elevated border border-border rounded-xl transition-colors"
+              >
+                <ExternalLink className="w-5 h-5 text-text-muted" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="mt-8 text-center">
+          <button
+            onClick={onClose}
+            className="px-6 py-3 bg-accent hover:bg-accent/90 text-white rounded-xl font-medium transition-colors"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/landing/src/hooks/useDashboardData.ts

@@ -13,6 +13,47 @@ import {
   type Earnings,
 } from "@/lib/convex-client";
 
+// Generate sample preview data for the dashboard
+function generatePreviewAnalytics(): Analytics {
+  const today = new Date();
+  const callsByDay = [];
+  
+  // Generate 14 days of sample data
+  for (let i = 13; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+    const calls = Math.floor(Math.random() * 40) + 20 + Math.sin(i * 0.5) * 15;
+    callsByDay.push({
+      date: date.toISOString().split('T')[0],
+      calls,
+      revenue: 0,
+    });
+  }
+
+  return {
+    totalCalls: 847,
+    uniqueAgents: 23,
+    totalRevenue: 0,
+    successRate: 98.2,
+    avgLatency: 145,
+    callsByDay,
+    topAgents: [
+      { agentId: "demo_1", calls: 234 },
+      { agentId: "demo_2", calls: 189 },
+      { agentId: "demo_3", calls: 156 },
+      { agentId: "demo_4", calls: 98 },
+      { agentId: "demo_5", calls: 67 },
+    ],
+    topActions: [
+      { actionName: "send_message", calls: 412 },
+      { actionName: "get_status", calls: 289 },
+      { actionName: "create_invoice", calls: 146 },
+    ],
+    apis: [],
+    isPreview: true,
+  };
+}
+
 interface DashboardData {
   session: ProviderSession | null;
   apis: ProviderAPI[];
@@ -57,6 +98,12 @@ export function useDashboardData(): DashboardData {
       }
 
       setSession(sessionData);
+      
+      // Update localStorage with current provider info
+      localStorage.setItem("apiclaw_provider", JSON.stringify({
+        name: sessionData.name,
+        email: sessionData.email
+      }));
 
       // Load all dashboard data in parallel
       const [apisData, analyticsData, earningsData] = await Promise.all([
@@ -66,7 +113,12 @@ export function useDashboardData(): DashboardData {
       ]);
 
       setApis(apisData || []);
-      setAnalytics(analyticsData);
+      // If no real analytics, show preview data
+      if (!analyticsData || analyticsData.totalCalls === 0) {
+        setAnalytics(generatePreviewAnalytics());
+      } else {
+        setAnalytics(analyticsData);
+      }
       setEarnings(earningsData);
     } catch (err) {
       console.error("Dashboard load error:", err);