From cf274072fd6777993c6ac78e966059cb877eb4f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Alejandro=20Irre=C3=B1o=20Torres?= Date: Sun, 16 Nov 2025 19:33:02 -0300 Subject: [PATCH 1/4] Add trainings page and shared button components Introduces a new trainings page with installation guides and downloadable resources for multiple toolkits. Refactors CircularButton into a shared component and adds a DownloadButton component. Updates navigation to link to the trainings page and adds relevant training files to the public directory. --- app/installation/page.tsx | 50 +----- app/trainings/page.tsx | 177 ++++++++++++++++++++ app/ui/components/circular-button.tsx | 59 +++++++ app/ui/components/download-button.tsx | 26 +++ app/ui/structure/nav-links.tsx | 7 +- public/related_products/config.json | 1 + public/training/clim4health-training.pdf | Bin 0 -> 1696534 bytes public/training/clim4health_for_website.zip | Bin 0 -> 3170715 bytes public/training/cube4health-training.pdf | Bin 0 -> 290904 bytes public/training/data4health-training.pdf | Bin 0 -> 1633914 bytes 10 files changed, 268 insertions(+), 52 deletions(-) create mode 100644 app/trainings/page.tsx create mode 100644 app/ui/components/circular-button.tsx create mode 100644 app/ui/components/download-button.tsx create mode 100644 public/training/clim4health-training.pdf create mode 100644 public/training/clim4health_for_website.zip create mode 100644 public/training/cube4health-training.pdf create mode 100644 public/training/data4health-training.pdf diff --git a/app/installation/page.tsx b/app/installation/page.tsx index cc49a37..e5269be 100644 --- a/app/installation/page.tsx +++ b/app/installation/page.tsx @@ -7,6 +7,7 @@ import { } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { useState } from 'react'; +import CircularButton from '../ui/components/circular-button'; import Data4HealthCoder from './components/Data4HealthCoder'; import Data4HealthNonCoder from './components/Data4HealthNonCoder'; @@ -41,54 +42,7 @@ interface SubButtonConfig { } -function CircularButton({ icon, label, onClick, isImage = false, isActive = false }: CircularButtonProps) { - const Icon = icon as React.ElementType; // For when icon is a component - return ( -
-
{ - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - onClick(); - } - }} - className={`cursor-pointer transform transition-all duration-300 ease-in-out hover:scale-110 hover:shadow-lg rounded-full p-4 w-24 h-24 flex items-center justify-center - ${isActive - ? 'bg-purple-100 shadow-lg scale-105 rotate-3' - : 'hover:bg-purple-50 hover:rotate-3'}`} - > - {isImage ? ( - {label} - ) : ( - // allow passing a simple string (emoji) as icon - typeof icon === 'string' ? ( - - {icon} - - ) : ( - - ) - )} -
- - {label} - -
- ); -} +// CircularButton is now a shared component in app/ui/components/circular-button.tsx interface SubButtonsProps { section: Section; diff --git a/app/trainings/page.tsx b/app/trainings/page.tsx new file mode 100644 index 0000000..e0ccf6f --- /dev/null +++ b/app/trainings/page.tsx @@ -0,0 +1,177 @@ +'use client'; + +import React from 'react'; +import Image from 'next/image'; +import { useState } from 'react'; +import CircularButton from '../ui/components/circular-button'; +import DownloadButton from '../ui/components/download-button'; + +const D4H_LOGO = '/cards/toolkits/data4health.svg'; +const C4H_LOGO = '/cards/toolkits/clim4health.svg'; +const L4H_LOGO = '/cards/toolkits/land4health.svg'; +const S4H_LOGO = '/cards/toolkits/socio4health.svg'; +const CU4H_LOGO = '/cards/toolkits/cube4health.svg'; + + +type Section = 'data4health' | 'clim4health' | 'land4health' | 'socio4health' | 'cube4health'; + +interface CircularButtonProps { + icon: React.ElementType | string; + label: string; + onClick: () => void; + isImage?: boolean; + isActive?: boolean; + size?: 'sm' | 'md'; +} + + +function SubButtons({ section }: { section: Section }) { + const resources: Record }> = { + data4health: { + pdf: '/training/data4health-training.pdf', + related: [ + //{ label: 'Quickstart (download)', href: '/cards/toolkits/data4health-quickstart.zip', isFile: true }, + //{ label: 'Online docs', href: 'https://example.org/data4health' }, + ], + }, + clim4health: { + pdf: '/training/clim4health-training.pdf', + related: [ + { label: 'Clim4Health training files', href: '/training/clim4health_for_website.zip', isFile: true, useButton: true }, + ], + }, + land4health: { + pdf: '/cards/toolkits/land4health-installation.pdf', + related: [ + { label: 'Land4Health dataset', href: '/cards/toolkits/land4health-dataset.zip', isFile: true }, + { label: 'Documentation', href: 'https://example.org/land4health' }, + ], + }, + socio4health: { + pdf: '/cards/toolkits/socio4health-installation.pdf', + related: [ + { label: 'Socio4Health notes (download)', href: '/cards/toolkits/socio4health-notes.pdf', isFile: true }, + { label: 'Website', href: 'https://example.org/socio4health' }, + ], + }, + cube4health: { + pdf: '/training/cube4health-training.pdf', + related: [ + //{ label: 'Cube4Health examples', href: '/cards/toolkits/cube4health-examples.zip', isFile: true }, + //{ label: 'Repo', href: 'https://example.org/cube4health' }, + ], + }, + }; + + const entry = resources[section]; + + return ( +
+

Installation & resources

+

Embedded installation guide and related materials for {section}.

+ + {entry?.pdf ? ( +
+ {/* The iframe/embed will show the PDF. If the PDF isn't present, users + can use the link below to open/download it. */} +