chore: clean up map page, update icons

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/map/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Globe, HelpCircle, MapPin } from "lucide-react";
+import { GlobeIcon, MapPinIcon, QuestionIcon } from "@phosphor-icons/react";
 import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -11,6 +11,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useMapLocationData } from "@/hooks/use-dynamic-query";
 import { cn } from "@/lib/utils";
 import { WebsitePageHeader } from "../_components/website-page-header";
+import { CountryFlag } from "@/components/analytics/icons/CountryFlag";
 
 interface CountryData {
   country: string;
@@ -86,7 +87,7 @@ function WebsiteMapPage() {
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <WebsitePageHeader
           title="Geographic Data"
-          icon={<Globe className="h-5 w-5 text-primary" />}
+          icon={<GlobeIcon className="h-5 w-5 text-primary" weight="duotone" aria-label="Globe" />}
           websiteId={id}
           variant="minimal"
           subtitle={!isLoading && totalVisitors > 0 ? `${totalVisitors.toLocaleString()} visitors across ${topCountries.length} countries` : undefined}
@@ -124,7 +125,7 @@ function WebsiteMapPage() {
           <CardHeader className="flex-shrink-0 pb-3">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
-                <MapPin className="h-4 w-4" />
+                <MapPinIcon className="h-4 w-4" weight="duotone" aria-label="World Map" />
                 World Map
               </span>
               <Badge className="text-xs" variant="secondary">
@@ -145,7 +146,7 @@ function WebsiteMapPage() {
         <Card className="flex min-h-0 flex-1 flex-col overflow-hidden rounded md:w-72 md:flex-none">
           <CardHeader className="flex-shrink-0 pb-3">
             <CardTitle className="flex items-center gap-2">
-              <Globe className="h-4 w-4" />
+              <GlobeIcon className="h-4 w-4" weight="duotone" aria-label="Top Countries" />
               Top Countries
             </CardTitle>
           </CardHeader>
@@ -220,7 +221,7 @@ function WebsiteMapPage() {
                     <div className="flex items-center justify-between p-3">
                       <div className="flex min-w-0 flex-1 items-center gap-3">
                         <div className="flex h-4 w-6 flex-shrink-0 items-center justify-center rounded bg-muted">
-                          <HelpCircle className="h-3 w-3 text-muted-foreground" />
+                          <QuestionIcon className="h-3 w-3 text-muted-foreground" weight="duotone" aria-label="Unknown" />
                         </div>
                         <div className="min-w-0 flex-1">
                           <div className="font-medium text-sm">Unknown</div>
@@ -244,7 +245,7 @@ function WebsiteMapPage() {
                   <div className="flex flex-col items-center justify-center py-16 text-center">
                     <div className="mb-4">
                       <div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/20">
-                        <Globe className="h-7 w-7 text-muted-foreground/50" />
+                        <GlobeIcon className="h-7 w-7 text-muted-foreground/50" weight="duotone" aria-label="No Data" />
                       </div>
                     </div>
                     <h4 className="mb-2 font-medium text-base text-foreground">

apps/dashboard/components/analytics/map-component.tsx

@@ -230,6 +230,14 @@ export function MapComponent({
   return (
     <div
       className="relative"
+      onMouseMove={(e) => {
+        if (tooltipContent) {
+          setTooltipPosition({
+            x: e.clientX,
+            y: e.clientY,
+          });
+        }
+      }}
       ref={containerRef}
       style={{ height }}
     >
@@ -272,20 +280,13 @@ export function MapComponent({
 
       {tooltipContent && (
         <div
-          role="tooltip"
           className="pointer-events-none fixed z-50 rounded-lg border border-gray-200 bg-white p-3 text-gray-900 text-sm shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white"
           style={{
             left: tooltipPosition.x,
             top: tooltipPosition.y - 10,
             transform: "translate(-50%, -100%)",
             boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
           }}
-          onMouseMove={(e) => {
-            setTooltipPosition({
-              x: e.clientX,
-              y: e.clientY,
-            });
-          }}
         >
           <div className="mb-1 flex items-center gap-2 font-medium">
             {tooltipContent.code && <CountryFlag country={tooltipContent.code.slice(0, 2)} />}