filters info

client/next.config.mjs

@@ -2,7 +2,7 @@ import('./src/env.mjs');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@serverless-app-scaffold/types', 'lucide-react'],
+  transpilePackages: ['@serverless-app-scaffold/types', 'lucide-react', 'hi'],
   images: {
     domains: ['api.mapbox.com'],
   },

client/package.json

@@ -20,6 +20,7 @@
     "@dnd-kit/modifiers": "6.0.0",
     "@dnd-kit/sortable": "7.0.1",
     "@dnd-kit/utilities": "3.2.0",
+    "@heroicons/react": "2.1.3",
     "@hookform/resolvers": "^3.1.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",

client/src/components/ui/dialog.tsx

@@ -48,17 +48,16 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute right-6 top-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-green-900">
-        <X className="h-4 w-4 text-yellow-400" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+  <div
+    className={cn('flex flex-col items-center space-y-1.5 text-center sm:text-left', className)}
+    {...props}
+  />
 );
 DialogHeader.displayName = 'DialogHeader';
 
@@ -76,16 +75,25 @@ const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, children, ...props }, ref) => (
-  <div className="w-full space-y-4 pb-6">
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cn('relative w-full text-lg font-semibold leading-none tracking-tight', className)}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Title>
-    <div className="absolute left-0 right-0 h-0.5 bg-gray-100" />
-  </div>
+  <>
+    <div className="flex h-16 w-full items-center pb-6">
+      <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+          'relative w-full text-lg font-semibold leading-none tracking-tight',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Title>
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-green-900">
+        <X className="h-4 w-4 text-yellow-400" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </div>
+    <div className="absolute left-0 right-0 top-16 h-0.5 bg-gray-100" />
+  </>
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 

client/src/containers/filters/constants.ts

@@ -28,3 +28,15 @@ export const AREAS = [
     label: '>500',
   },
 ];
+
+export const FILTERS_INFO = {
+  intervention:
+    'The project category its aims to support for forest management within each Member Country.',
+  country: 'AFoCO Member Country.',
+  area_restored:
+    'The dimensions of the implementation for restored or reforested area, including total conservation and plantation area, consistent with the outline in the project proposal.',
+  area_protected:
+    'The dimensions of the implementation for conservation and protection area consistent with the specifications detailed in the project proposal.',
+  area_plantation:
+    'The dimensions of the implementation for plantation area consistent with the specifications detailed in the project proposal.',
+};

client/src/containers/filters/content.tsx

@@ -2,6 +2,11 @@
 
 import { useCallback } from 'react';
 
+import Markdown from 'react-markdown';
+
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import remarkGfm from 'remark-gfm';
+
 import { useGetCountries } from '@/types/generated/country';
 
 import { useSyncFilters } from '@/hooks/datasets/sync-query';
@@ -17,9 +22,9 @@ import {
   SelectValue,
   SelectTrigger,
 } from '@/components/ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
-import { AREAS, INTERVENTION_TYPES } from './constants';
-
+import { AREAS, INTERVENTION_TYPES, FILTERS_INFO } from './constants';
 const FiltersCheckbox = ({
   type,
   title,
@@ -58,7 +63,22 @@ const FiltersCheckbox = ({
 
   return (
     <div className="flex flex-col space-y-2">
-      <span className="font-extrabold leading-5">{title}</span>
+      <div className="flex items-center space-x-2">
+        <span className="font-extrabold leading-5">{title}</span>
+        <Tooltip>
+          <TooltipTrigger className="flex items-center justify-center rounded-full p-2">
+            <InformationCircleIcon className="h-4 w-4 text-yellow-900 hover:text-yellow-800" />
+          </TooltipTrigger>
+
+          <TooltipContent className="max-w-[200px] p-2">
+            <p className="text-sm text-yellow-900">
+              <Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
+                {FILTERS_INFO[type]}
+              </Markdown>
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
       <div className="flex flex-wrap items-center gap-2 text-gray-900">
         {options.map(({ id, label }) => (
           <div key={id} className="flex items-center space-x-2 pr-2 last:pr-0">
@@ -102,8 +122,22 @@ export default function FiltersContent() {
     <div className="flex flex-col space-y-6 text-sm">
       <FiltersCheckbox type="intervention" title="Intervention type" options={INTERVENTION_TYPES} />
       <div className="flex flex-col">
-        <span className="font-extrabold leading-5">Country</span>
-
+        <div className="flex items-center space-x-2">
+          <span className="font-extrabold leading-5">Country</span>
+          <Tooltip>
+            <TooltipTrigger className="flex items-center justify-center rounded-full p-2">
+              <InformationCircleIcon className="h-4 w-4 text-yellow-900 hover:text-yellow-800" />
+            </TooltipTrigger>
+
+            <TooltipContent className="max-w-[200px] p-2">
+              <p className="text-sm text-yellow-900">
+                <Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
+                  {FILTERS_INFO['country']}
+                </Markdown>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
         <Select onValueChange={handleSingleValueChange}>
           <SelectTrigger className="flex h-10 items-center justify-between rounded border border-gray-400 px-4">
             <div>

client/src/containers/filters/intervention_types_info.mdx

@@ -0,0 +1 @@
+

yarn.lock

@@ -17,6 +17,7 @@ __metadata:
     "@dnd-kit/modifiers": 6.0.0
     "@dnd-kit/sortable": 7.0.1
     "@dnd-kit/utilities": 3.2.0
+    "@heroicons/react": 2.1.3
     "@hookform/resolvers": ^3.1.1
     "@radix-ui/react-accordion": ^1.1.2
     "@radix-ui/react-checkbox": ^1.0.4
@@ -2034,6 +2035,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@heroicons/react@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@heroicons/react@npm:2.1.3"
+  peerDependencies:
+    react: ">= 16"
+  checksum: 2a72920fa36d789d08aab76f09a687dd86f2ed665d21d796593e3f744457d5436467f1c3324103a794afa9ca7235ffd1fde00953ce348b501c7304890b1fe746
+  languageName: node
+  linkType: hard
+
 "@hookform/resolvers@npm:^3.1.1":
   version: 3.1.1
   resolution: "@hookform/resolvers@npm:3.1.1"