knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement dataset page v0.1 + Home improvements (#892)

Browse Source 
* [examples/openspending][xl]: implement dataset page v0.1, add pagination to the datasets grid

* [examples/openspending][m] - fix build + add tests

---------

Co-authored-by: Luccas Mateus de Medeiros Gomes <luccasmmg@gmail.com>
This commit is contained in:
João Demenech
2023-05-18 21:19:01 -03:00
committed by GitHub
parent 2115a3fdb3
commit adb6d1bb0e
19 changed files with 646 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
examples/openspending/components/Header.tsx
View File

@@ -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<boolean>(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 (
<header className="z-50 pb-5 lg:pt-11 sticky top-0 backdrop-blur" id="header">
<Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
<div className="mt-10 lg:mt-0 lg:grow lg:basis-0 flex items-center">
<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">
<Link href="/" className="lg:mt-0 lg:grow lg:basis-0 flex items-center">
<Image src={logo} alt="OpenSpending" className="h-12 w-auto" />
</div>
<ul className='list-none flex gap-x-5 text-base font-medium'>
</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" : ""}`}
className={`text-emerald-900 hover:text-emerald-600 ${
isActive(link) ? 'text-emerald-600' : ''
}`}
href={link.href}
scroll={false}
>
{link.title}
</Link>
</li>))}
</li>
))}
</ul>
<div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
<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" />
</button>
</div>
{menuOpen && (
<div className={`sm:hidden basis-full mt-5 text-center`}>
<ul className="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>
</li>
))}
</ul>
</div>
)}
</Container>
</header >
)
</header>
);
}