[examples/openspending] - openspending v0.2 (#907)
* [examples/openspending] - openspending v0.2 * [examples/openspending][m] - fix build * [examples/openspending][xs] - fix build * [examples/openspending][xs] - add prebuild step * [examples/openspending][m] - fix requested by demenech * [examples/openspending][sm] - remove links + fix bug
This commit is contained in:
Luccas Mateus
GitHub
@@ -13,9 +13,13 @@ import { useState } from 'react';
|
||||
export default function DatasetsSearch({
|
||||
datasets,
|
||||
availableCountries,
|
||||
minPeriod,
|
||||
maxPeriod,
|
||||
}: {
|
||||
datasets: Project[];
|
||||
availableCountries;
|
||||
minPeriod: string;
|
||||
maxPeriod: string;
|
||||
}) {
|
||||
const itemsPerPage = 6;
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -132,7 +136,10 @@ export default function DatasetsSearch({
|
||||
<div className="relative">
|
||||
<input
|
||||
aria-label="Min. date"
|
||||
type="date"
|
||||
type="text"
|
||||
placeholder={minPeriod}
|
||||
onFocus={(e) => (e.target.type = 'date')}
|
||||
onBlur={(e) => (e.target.type = 'text')}
|
||||
{...register('minDate', { onChange: () => setPage(1) })}
|
||||
className="h-[3em] w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-emerald-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-emerald-400 sm:text-sm"
|
||||
/>
|
||||
@@ -145,7 +152,10 @@ export default function DatasetsSearch({
|
||||
<div className="relative">
|
||||
<input
|
||||
aria-label="Max. date"
|
||||
type="date"
|
||||
type="text"
|
||||
placeholder={maxPeriod}
|
||||
onFocus={(e) => (e.target.type = 'date')}
|
||||
onBlur={(e) => (e.target.type = 'text')}
|
||||
{...register('maxDate', { onChange: () => setPage(1) })}
|
||||
className="h-[3em] w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-emerald-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-emerald-400 sm:text-sm"
|
||||
/>
|
||||
|
||||
@@ -5,6 +5,9 @@ import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Bars3Icon } from '@heroicons/react/24/outline';
|
||||
import { useState } from 'react';
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid';
|
||||
|
||||
export function Header() {
|
||||
const [menuOpen, setMenuOpen] = useState<boolean>(false);
|
||||
@@ -16,42 +19,69 @@ export function Header() {
|
||||
};
|
||||
|
||||
const navLinks = [
|
||||
{
|
||||
title: 'Home',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Datasets',
|
||||
href: '/#datasets',
|
||||
},
|
||||
// {
|
||||
// title: "Community",
|
||||
// href: "https://community.openspending.org/"
|
||||
// }
|
||||
{
|
||||
title: 'Blog',
|
||||
href: '/blog',
|
||||
},
|
||||
{
|
||||
title: 'About',
|
||||
href: '/about',
|
||||
children: [
|
||||
{
|
||||
title: 'Fiscal Data Package',
|
||||
href: '/about/fiscaldatapackage/',
|
||||
},
|
||||
{
|
||||
title: 'Tools',
|
||||
href: '/about/tools/',
|
||||
},
|
||||
{
|
||||
title: 'Funders',
|
||||
href: '/about/funders/',
|
||||
},
|
||||
{
|
||||
title: 'Presentations',
|
||||
href: '/about/presentations/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
href: '/resources',
|
||||
children: [
|
||||
{
|
||||
title: 'Follow the money',
|
||||
href: '/resources/journo',
|
||||
},
|
||||
{
|
||||
title: 'Map of Spending Projects',
|
||||
href: '/resources/map-of-spending-projects/',
|
||||
},
|
||||
{
|
||||
title: 'Working Group On Open Spending Data',
|
||||
href: '/resources/wg/',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="relative z-50 pb-11 lg:pt-11">
|
||||
<Container className="flex flex-wrap items-center justify-between lg:flex-nowrap mt-10 lg:mt-0">
|
||||
<Container className="flex flex-wrap justify-between lg:flex-nowrap mt-10 lg:mt-0">
|
||||
<Link href="/" className="lg:mt-0 lg:grow lg:basis-0 flex items-center">
|
||||
<Image src={logo} alt="OpenSpending" className="h-12 w-auto" />
|
||||
</Link>
|
||||
<ul className="hidden list-none sm:flex gap-x-5 text-base font-medium">
|
||||
{navLinks.map((link, i) => (
|
||||
<li key={`nav-link-${i}`}>
|
||||
<Link
|
||||
className={`text-emerald-900 hover:text-emerald-600 ${
|
||||
isActive(link) ? 'text-emerald-600' : ''
|
||||
}`}
|
||||
href={link.href}
|
||||
scroll={false}
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
<Dropdown navItem={link} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="hidden xl:block xl:grow"></div>
|
||||
<div className="sm:hidden sm:mt-10 lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
|
||||
<button onClick={() => setMenuOpen(!menuOpen)}>
|
||||
<Bars3Icon className="w-8 h-8" />
|
||||
@@ -80,3 +110,77 @@ export function Header() {
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
function Dropdown({ navItem }: { navItem: any }) {
|
||||
const [showDropDown, setShowDropDown] = useState(false);
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button
|
||||
onMouseEnter={() => setShowDropDown(true)}
|
||||
onMouseLeave={() => setShowDropDown(false)}
|
||||
className="text-emerald-900 hover:text-emerald-600 inline-flex w-full justify-center gap-x-1.5 px-3 py-2 text-sm font-semibold"
|
||||
>
|
||||
<Link href={navItem.href}>{navItem.title}</Link>
|
||||
{navItem.children && (
|
||||
<ChevronDownIcon
|
||||
className="-mr-1 h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
{navItem.children && (
|
||||
<Transition
|
||||
as={Fragment}
|
||||
show={showDropDown}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div>
|
||||
<Menu.Items
|
||||
static
|
||||
onMouseEnter={() => setShowDropDown(true)}
|
||||
onMouseLeave={() => setShowDropDown(false)}
|
||||
className="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="py-1">
|
||||
{navItem.children.map((item) => (
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
active
|
||||
? 'bg-gray-100 text-emerald-900 hover:text-emerald-600'
|
||||
: 'text-gray-700',
|
||||
'block px-4 py-2 text-sm'
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</div>
|
||||
</Transition>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ export function Hero({ countriesCount, datasetsCount, filesCount }) {
|
||||
<Button href="#datasets" className="mt-10">
|
||||
Search datasets
|
||||
</Button>
|
||||
<dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-6 sm:mt-16 sm:gap-x-16 sm:gap-y-10 sm:text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
|
||||
<dl className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-x-10 gap-y-6 sm:mt-16 sm:gap-x-16 sm:gap-y-10 sm:text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
|
||||
{[
|
||||
// Added the plus sign because some datasets do not
|
||||
// contain defined countries
|
||||
@@ -36,10 +36,18 @@ export function Hero({ countriesCount, datasetsCount, filesCount }) {
|
||||
['Files', filesCount],
|
||||
].map(([name, value]) => (
|
||||
<div key={name}>
|
||||
<dt className="font-mono text-sm text-emerald-600">{name}</dt>
|
||||
<dd className="mt-0.5 text-2xl font-semibold tracking-tight text-emerald-900">
|
||||
{value}
|
||||
</dd>
|
||||
<div className='flex gap-x-2 items-center sm:hidden' key={name}>
|
||||
<dd className="mt-0.5 text-2xl font-semibold tracking-tight text-emerald-900">
|
||||
{value}
|
||||
</dd>
|
||||
<dt className="font-mono text-sm text-emerald-600">{name}</dt>
|
||||
</div>
|
||||
<div className='hidden sm:block' key={name}>
|
||||
<dt className="font-mono text-sm text-emerald-600">{name}</dt>
|
||||
<dd className="mt-0.5 text-2xl font-semibold tracking-tight text-emerald-900">
|
||||
{value}
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
|
||||
25
examples/openspending/components/_shared/Footer.tsx
Normal file
25
examples/openspending/components/_shared/Footer.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-between md:flex-row">
|
||||
<div className="flex gap-x-2 items-center">
|
||||
<p className="mt-8 text-base text-slate-500 md:mt-0">Maintained by</p>
|
||||
<a href="https://www.datopian.com/">
|
||||
<Image
|
||||
alt="Datopian logo"
|
||||
className="mb-2"
|
||||
src="/datopian-logotype.png"
|
||||
width={160}
|
||||
height={40}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p className="mt-6 text-base text-slate-500 md:mt-0">
|
||||
Copyright © 2023 Datopian, LLC. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
import { Header } from '../Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<div className="bg-white min-h-screen pb-32">
|
||||
<div className="bg-white min-h-screen pb-12">
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user