diff --git a/app/scripts/components/common/content-taxonomy.tsx b/app/scripts/components/common/content-taxonomy.tsx new file mode 100644 index 000000000..e6c7d84af --- /dev/null +++ b/app/scripts/components/common/content-taxonomy.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import styled from 'styled-components'; +import { TaxonomyItem } from 'veda'; +import { Link } from 'react-router-dom'; +import { glsp, themeVal } from '@devseed-ui/theme-provider'; +import { Heading, Overline } from '@devseed-ui/typography'; + +import { Actions } from './browse-controls/use-browse-controls'; + +import { variableGlsp } from '$styles/variable-utils'; +import Constrainer from '$styles/constrainer'; +import { Pill } from '$styles/pill'; +import { DATASETS_PATH } from '$utils/routes'; + +const TaxonomySection = styled.section` + background-color: ${themeVal('color.base-100')}; + padding: ${variableGlsp()}; +`; + +const TaxonomySectionInner = styled(Constrainer)` + ${Heading} { + grid-column: 1 / -1; + } +`; + +const TaxonomyList = styled.dl` + grid-column: 1 / -1; + display: grid; + grid-template-columns: max-content 1fr; + gap: ${glsp(1.5, 1)}; + align-items: center; + + > dt { + grid-column: 1; + } + + > dd { + grid-column: 2; + display: flex; + flex-flow: row wrap; + gap: ${glsp(0.5)}; + } +`; + +interface ContentTaxonomyProps { + taxonomy: Record; +} + +export function ContentTaxonomy(props: ContentTaxonomyProps) { + const { taxonomy } = props; + + const taxonomies = Object.entries(taxonomy) as [string, TaxonomyItem[]][]; + + if (!taxonomies.length) return null; + + return ( + + + + + {taxonomies.map(([key, values]) => ( + +
+ {key} +
+
+ {values.map((t) => ( + + {t.name} + + ))} +
+
+ ))} +
+
+
+ ); +} diff --git a/app/scripts/components/datasets/s-overview/index.tsx b/app/scripts/components/datasets/s-overview/index.tsx index 385434c73..324659e32 100644 --- a/app/scripts/components/datasets/s-overview/index.tsx +++ b/app/scripts/components/datasets/s-overview/index.tsx @@ -13,6 +13,7 @@ import { NotebookConnectButton } from '$components/common/notebook-connect'; import { allDatasetsProps, useDataset } from '$utils/veda-data'; import { DATASETS_PATH, getDatasetExplorePath } from '$utils/routes'; +import { ContentTaxonomy } from '$components/common/content-taxonomy'; const MdxContent = lazy(() => import('$components/common/mdx-content')); @@ -67,7 +68,11 @@ function DatasetsOverview() { attributionAuthor={dataset.data.media?.author?.name} attributionUrl={dataset.data.media?.author?.url} /> - + + + + + {!!dataset.data.related?.length && ( )} diff --git a/app/scripts/components/discoveries/single/index.tsx b/app/scripts/components/discoveries/single/index.tsx index fcfec2050..7ef679666 100644 --- a/app/scripts/components/discoveries/single/index.tsx +++ b/app/scripts/components/discoveries/single/index.tsx @@ -7,6 +7,7 @@ import { PageMainContent } from '$styles/page'; import RelatedContent from '$components/common/related-content'; import { DISCOVERIES_PATH } from '$utils/routes'; import { useDiscovery, allDiscoveriesProps } from '$utils/veda-data'; +import { ContentTaxonomy } from '$components/common/content-taxonomy'; const MdxContent = lazy(() => import('$components/common/mdx-content')); @@ -43,7 +44,11 @@ function DiscoveriesSingle() { attributionAuthor={media?.author?.name} attributionUrl={media?.author?.url} /> + + + + {!!related?.length && } diff --git a/app/scripts/styles/constrainer.js b/app/scripts/styles/constrainer.ts similarity index 100% rename from app/scripts/styles/constrainer.js rename to app/scripts/styles/constrainer.ts