add location tooltip on project detail

Vizzuality · Mar 1, 2024 · 3524ec7 · 3524ec7
1 parent 7f17967
commit 3524ec7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/client/src/containers/projects/detail/constants.ts b/client/src/containers/projects/detail/constants.ts
@@ -5,7 +5,21 @@ import TRAINING_SVG from '@/svgs/ui/training-activities.svg';
 export const PANEL_OVERVIEW_ITEMS = [
   { title: 'Status', value: 'Ongoing' },
   { title: 'Priority Areas', value: 'Climate change adaptation' },
-  { title: 'Location', value: 'West Nousa, Indonesia' },
+  {
+    title: 'Location',
+    value: 'West Nousa, Indonesia',
+    items: [
+      {
+        title: 'West Java, Indonesia',
+      },
+      {
+        title: 'East Kalimantan, Indonesia',
+      },
+      {
+        title: 'Central Sulawesi, Indonesia',
+      },
+    ],
+  },
   { title: 'Duration', value: '2021-2024' },
   { title: 'Donors', value: 'Korea Forest Service' },
   { title: 'Investment', value: 'USD 800K' },

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, useParams, useSearchParams } from 'next/navigation';
 
-import { Tooltip } from '@radix-ui/react-tooltip';
 import { useAtom } from 'jotai';
 import { ArrowLeft, ChevronRight, Share as Download, X } from 'lucide-react';
 import * as qs from 'qs';
@@ -16,7 +15,7 @@ import Share from '@/containers/share';
 
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
-import { TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 import ProjectDashboard from './dashboard';
 
@@ -93,7 +92,32 @@ export default function ProjectDetailPanel() {
               className="flex justify-between border-b-2 border-dotted border-gray-400 py-4"
             >
               <p className="text-xs font-medium uppercase text-gray-500">{title}</p>
-              <p className="text-sm text-yellow-900">{value}</p>
+              {title === 'Location' && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <p className="cursor-pointer text-sm text-yellow-900 underline hover:no-underline">
+                      {value}
+                    </p>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side={'top'}
+                    sideOffset={4}
+                    className="rounded-lg border-none p-4"
+                  >
+                    <ol className="text-sm text-yellow-900">
+                      {PANEL_OVERVIEW_ITEMS.find((item) => item.title === title)?.items?.map(
+                        (item, idx) => (
+                          <li key={idx}>
+                            {idx + 1}. {item.title}
+                          </li>
+                        )
+                      )}
+                    </ol>
+                    <TooltipArrow className="fill-white" />
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              {title !== 'Location' && <p className="text-sm text-yellow-900">{value}</p>}
             </div>
           ))}
         </div>