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/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 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
+            <InformationCircleIcon className="h-4 w-4 text-yellow-900" />
+          </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 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
+              <InformationCircleIcon className="h-4 w-4 text-yellow-900" />
+            </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 @@
+

package.json

@@ -15,5 +15,10 @@
   },
   "engines": {
     "node": ">= 18.17"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.3",
+    "heroicons": "^2.1.3",
+    "heroicons-react": "^1.4.1"
   }
 }

yarn.lock

@@ -2034,6 +2034,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"
@@ -7267,6 +7276,10 @@ __metadata:
 "afoco@workspace:.":
   version: 0.0.0-use.local
   resolution: "afoco@workspace:."
+  dependencies:
+    "@heroicons/react": ^2.1.3
+    heroicons: ^2.1.3
+    heroicons-react: ^1.4.1
   languageName: unknown
   linkType: soft
 
@@ -12855,6 +12868,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"heroicons-react@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "heroicons-react@npm:1.4.1"
+  peerDependencies:
+    react: ">=16.13"
+  checksum: b27892ee0f0d48951b60b892d6d7258c4e41665f0122e07f0a82dca56502f189ffcc1d2bbcb86a139ef5a7a9197bddf614b32e98c097addb528974f2ecf4bce2
+  languageName: node
+  linkType: hard
+
+"heroicons@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "heroicons@npm:2.1.3"
+  checksum: 5b84398ebff5bd914b07d184c7b9b11d9c22dff9fd545bad2b055289eb08ed1bd6333f5759c12849d79a255b6c0a6ec4d5db87ea53289107db75a5bb38d3af8d
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^10.4.1":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"