diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index 2828b49e..669028dd 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -20,6 +20,10 @@ const buttonVariants = cva( // 'bg-slate-100 text-slate-900 hover:bg-slate-100/80', ghost: 'hover:bg-gray-50 hover:text-gray-900 focus-visible:ring-black', // link: 'text-slate-900 underline-offset-4 hover:underline', + white: 'bg-white border border-black', + 'sidebar-details': + 'bg-blue text-black text-black text-sm justify-start text-left text-sm hover:brightness-90 font-bold uppercase md:px-8 focus-visible:ring-black', + 'text-link': 'text-sm font-semibold uppercase underline focus-visible:ring-black', }, size: { default: 'h-10 px-4 py-2', @@ -27,6 +31,7 @@ const buttonVariants = cva( // lg: 'h-11 px-8', icon: 'h-10 w-10', 'icon-sm': 'h-6 w-6', + full: 'h-full w-full', }, }, defaultVariants: { diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx new file mode 100644 index 00000000..b75cf083 --- /dev/null +++ b/frontend/src/containers/data-tool/content/details/index.tsx @@ -0,0 +1,40 @@ +import DashboardTable from '@/components/dashboard-table'; +import { Button } from '@/components/ui/button'; +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +import { mockedData } from './mocked-data'; + +const DataToolDetails: React.FC = () => { + const [, setSettings] = useSyncDataToolContentSettings(); + + const handleOnCloseClick = () => { + setSettings((prevSettings) => ({ ...prevSettings, showDetails: false })); + }; + + return ( +
+
+ +

+ Marine Conservation at National and Regional Levels +

+ + +
+
+ {/* NOTE: Div to test the horizontal overflow */} +
+ {/* + NOTE: We don't need a separate table component, but it's easier + to have one while using mocked data in order to keep this component clean + */} + +
+
+
+ ); +}; + +export default DataToolDetails; diff --git a/frontend/src/containers/data-tool/content/details/mocked-data.ts b/frontend/src/containers/data-tool/content/details/mocked-data.ts new file mode 100644 index 00000000..dec3825f --- /dev/null +++ b/frontend/src/containers/data-tool/content/details/mocked-data.ts @@ -0,0 +1,67 @@ +import { DashboardTableItem } from '@/components/dashboard-table'; + +export const mockedData: DashboardTableItem[] = [ + { + location: 'United Kingdom', + locationId: 'GB', + type: 'country', + signedInitiative: true, + score: 0.6, + ecosystems: ['Mangroves', 'Open ocean', 'Kelp forest'], + updated: new Date('2023-08-01'), + }, + { + location: 'Mexico', + locationId: 'MX', + type: 'country', + signedInitiative: false, + score: undefined, + ecosystems: [], + updated: new Date('2023-07-01'), + }, + { + location: 'Spain', + locationId: 'ES', + type: 'country', + signedInitiative: true, + score: 3.0, + ecosystems: ['Open ocean'], + updated: new Date('2022-10-01'), + }, + { + location: 'Brazil', + locationId: 'BR', + type: 'country', + signedInitiative: false, + score: undefined, + ecosystems: [], + updated: new Date('2023-01-01'), + }, + { + location: 'France', + locationId: 'FR', + type: 'country', + signedInitiative: true, + score: 12.7, + ecosystems: ['Mangroves'], + updated: new Date('2021-12-01'), + }, + { + location: 'Netherlands', + locationId: 'NL', + type: 'country', + signedInitiative: true, + score: 1.6, + ecosystems: ['Kelp forest', 'Open ocean'], + updated: new Date('2022-02-01'), + }, + { + location: 'Worldwide', + locationId: 'worldwide', + type: 'region', + signedInitiative: true, + score: 1.6, + ecosystems: ['Coral reefs', 'Kelp forest', 'Open ocean'], + updated: new Date('2023-04-01'), + }, +]; diff --git a/frontend/src/containers/data-tool/content/index.tsx b/frontend/src/containers/data-tool/content/index.tsx index ee19afe2..ee08a3f0 100644 --- a/frontend/src/containers/data-tool/content/index.tsx +++ b/frontend/src/containers/data-tool/content/index.tsx @@ -1,8 +1,17 @@ +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +import Details from './details'; import Map from './map'; -// import Table from './table'; const DataToolContent: React.FC = () => { - return ; + const [{ showDetails }] = useSyncDataToolContentSettings(); + + return ( +
+ + {showDetails &&
} +
+ ); }; export default DataToolContent; diff --git a/frontend/src/containers/data-tool/content/map/index.tsx b/frontend/src/containers/data-tool/content/map/index.tsx index 1672084c..eb1db5c1 100644 --- a/frontend/src/containers/data-tool/content/map/index.tsx +++ b/frontend/src/containers/data-tool/content/map/index.tsx @@ -85,7 +85,7 @@ const DataToolMap: React.FC = () => { ); return ( -
+
{ - return
Table
; -}; - -export default DatatoolTable; diff --git a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx new file mode 100644 index 00000000..f3cab1ed --- /dev/null +++ b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx @@ -0,0 +1,26 @@ +import { ArrowRight } from 'lucide-react'; + +import { Button } from '@/components/ui/button'; +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +const DetailsButton: React.FC = () => { + const [, setSettings] = useSyncDataToolContentSettings(); + + const handleButtonClick = () => { + setSettings((prevSettings) => ({ ...prevSettings, showDetails: true })); + }; + + return ( + + ); +}; + +export default DetailsButton; diff --git a/frontend/src/containers/data-tool/sidebar/index.tsx b/frontend/src/containers/data-tool/sidebar/index.tsx index 54dcd2d1..56f74f9c 100644 --- a/frontend/src/containers/data-tool/sidebar/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/index.tsx @@ -8,6 +8,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component import { cn } from '@/lib/classnames'; import { locationAtom } from '@/store/location'; +import DetailsButton from './details-button'; import LocationSelector from './location-selector'; import Widgets from './widgets'; @@ -25,8 +26,8 @@ const DataToolSidebar: React.FC = () => { -
+

{location.name}

-
+
+
+ +
); diff --git a/frontend/src/containers/data-tool/sync-settings.ts b/frontend/src/containers/data-tool/sync-settings.ts new file mode 100644 index 00000000..f3122ea4 --- /dev/null +++ b/frontend/src/containers/data-tool/sync-settings.ts @@ -0,0 +1,15 @@ +import { useQueryState } from 'next-usequerystate'; +import { parseAsJson } from 'next-usequerystate/parsers'; + +const DEFAULT_SYNC_CONTENT_SETTINGS: { + showDetails: boolean; +} = { + showDetails: false, +}; + +export const useSyncDataToolContentSettings = () => { + return useQueryState( + 'content', + parseAsJson().withDefault(DEFAULT_SYNC_CONTENT_SETTINGS) + ); +};