-
- watch().searchTerm && watch().searchTerm !== ''
- ? index.search(watch().searchTerm).includes(dataset.name)
- : true
- )
- .filter((dataset) =>
- watch().country && watch().country !== ''
- ? dataset.countryCode === watch().country
- : true
- )
- // TODO: Does that really makes sense?
- // What if the fiscalPeriod is 2015-2017 and inputs are
- // set to 2015-2016. It's going to be filtered out but
- // it shouldn't.
- .filter((dataset) =>
- watch().minDate && watch().minDate !== ''
- ? dataset.fiscalPeriod?.start >= watch().minDate
- : true
- )
- .filter((dataset) =>
- watch().maxDate && watch().maxDate !== ''
- ? dataset.fiscalPeriod?.end <= watch().maxDate
- : true
- )}
- />
+
+
+ {filteredDatasets.length} datasets found
+
+
+
+
+
+
+
+
+ Page {page} of {pageCount}
+
+
+
+
>
);
diff --git a/examples/openspending/components/Header.tsx b/examples/openspending/components/Header.tsx
index c9fb47a0..50009713 100644
--- a/examples/openspending/components/Header.tsx
+++ b/examples/openspending/components/Header.tsx
@@ -1,53 +1,82 @@
-import Image from 'next/image'
-import { Button } from './Button'
-import { Container } from './Container'
-import logo from "../public/logo.svg"
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Image from 'next/image';
+import { Container } from './Container';
+import logo from '../public/logo.svg';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
export function Header() {
+ const [menuOpen, setMenuOpen] = useState(false);
+
const router = useRouter();
const isActive = (navLink) => {
- return router.asPath.split("?")[0] == navLink.href;
- }
+ return router.asPath.split('?')[0] == navLink.href;
+ };
const navLinks = [
{
- title: "Home",
- href: "/#header"
+ title: 'Home',
+ href: '/',
},
{
- title: "Datasets",
- href: "/#datasets"
+ title: 'Datasets',
+ href: '/#datasets',
},
- {
- title: "Community",
- href: "https://community.openspending.org/"
- }
- ]
+ // {
+ // title: "Community",
+ // href: "https://community.openspending.org/"
+ // }
+ ];
return (
-
-
-
+
+
+
-
-
+
+
{navLinks.map((link, i) => (
{link.title}
-
))}
+
+ ))}
-
+
+
+
+ {menuOpen && (
+
+
+ {navLinks.map((link, i) => (
+
+
+ {link.title}
+
+
+ ))}
+
+
+ )}
-
- )
+
+ );
}
diff --git a/examples/openspending/components/Hero.tsx b/examples/openspending/components/Hero.tsx
index b09b321c..6c28ee1f 100644
--- a/examples/openspending/components/Hero.tsx
+++ b/examples/openspending/components/Hero.tsx
@@ -1,9 +1,9 @@
-import { Button } from './Button'
-import { Container } from './Container'
+import { Button } from './Button';
+import { Container } from './Container';
-export function Hero() {
+export function Hero({ countriesCount, datasetsCount, filesCount }) {
return (
-
+
@@ -15,12 +15,13 @@ export function Hero() {
- By understanding how governments spend money in our name can we have a say
- in how that money will affect our own lives. The journey starts here.
+ By understanding how governments spend money in our name can we
+ have a say in how that money will affect our own lives. The
+ journey starts here.
- OpenSpending is a free, open and global platform to search, visualise and analyse
- fiscal data in the public sphere.
+ OpenSpending is a free, open and global platform to search,
+ visualise and analyse fiscal data in the public sphere.
{[
- ['Countries', '75'],
- ['Datasets', '2091'],
- ['Files', '9230'],
+ // Added the plus sign because some datasets do not
+ // contain defined countries
+ ['Countries', '+' + countriesCount],
+ ['Datasets', datasetsCount],
+ ['Files', filesCount],
].map(([name, value]) => (
{name}
@@ -43,5 +46,5 @@ export function Hero() {
- )
+ );
}
diff --git a/examples/openspending/components/_shared/Layout.tsx b/examples/openspending/components/_shared/Layout.tsx
new file mode 100644
index 00000000..7c10c66f
--- /dev/null
+++ b/examples/openspending/components/_shared/Layout.tsx
@@ -0,0 +1,10 @@
+import { Header } from '../Header';
+
+export default function Layout({ children }) {
+ return (
+