[dyad] Add tracking detection tab - wrote 4 file(s)

2026-01-21 08:24:10 +01:00
parent a8d95d6879
commit 8a615c11f8
4 changed files with 150 additions and 18 deletions
--- a/src/components/tracking-display.tsx
+++ b/src/components/tracking-display.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import type { TrackingTool } from "@/app/actions";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { CopyButton } from "./copy-button";
+import { BarChart, Tag, Facebook, Activity, Wind } from "lucide-react";
+
+interface TrackingDisplayProps {
+  tools: TrackingTool[];
+}
+
+const toolInfo: {
+  [key: string]: { icon: React.ElementType; description: string };
+} = {
+  "Google Tag Manager": {
+    icon: Tag,
+    description: "A tag management system to deploy and update marketing tags.",
+  },
+  "Google Analytics (GA4)": {
+    icon: BarChart,
+    description: "The latest version of Google's web analytics service.",
+  },
+  "Google Analytics (Universal)": {
+    icon: BarChart,
+    description: "The previous generation of Google Analytics.",
+  },
+  "Facebook Pixel": {
+    icon: Facebook,
+    description: "An analytics tool to measure the effectiveness of advertising.",
+  },
+  Hotjar: {
+    icon: Wind,
+    description: "A tool for behavior analytics and user feedback.",
+  },
+  HubSpot: {
+    icon: Activity,
+    description: "An inbound marketing, sales, and service software.",
+  },
+  Default: {
+    icon: Activity,
+    description: "A detected tracking or analytics tool.",
+  },
+};
+
+export function TrackingDisplay({ tools }: TrackingDisplayProps) {
+  return (
+    <Card className="w-full shadow-lg rounded-lg">
+      <CardHeader>
+        <CardTitle>Tracking Analysis</CardTitle>
+        <CardDescription>
+          External analytics and marketing tools detected on the page.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {tools && tools.length > 0 ? (
+          <div className="space-y-4">
+            {tools.map((tool, index) => {
+              const info = toolInfo[tool.name] || toolInfo["Default"];
+              const Icon = info.icon;
+              return (
+                <div
+                  key={index}
+                  className="flex items-start gap-4 p-4 border rounded-lg bg-muted/50"
+                >
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                    <Icon className="h-6 w-6" />
+                  </div>
+                  <div className="flex-grow">
+                    <h4 className="font-semibold text-lg">{tool.name}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {info.description}
+                    </p>
+                    {tool.id && (
+                      <div className="mt-2 flex items-center gap-2 p-2 bg-background rounded-md">
+                        <span className="text-sm font-mono text-muted-foreground flex-grow break-all">
+                          {tool.id}
+                        </span>
+                        <CopyButton textToCopy={tool.id} />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No external tracking tools detected.</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}