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

27
examples/openspending/components/Hero.tsx
View File

@@ -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 (
<div className="relative pb-20 pt-10 sm:py-40">
<div className="relative pb-20 pt-10 sm:py-40" id="hero">
<div className="absolute inset-x-0 -bottom-14 -top-48 overflow-hidden bg-green-50 bg-opacity-50">
<div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white" />
<div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white" />
@@ -15,12 +15,13 @@ export function Hero() {
</h1>
<div className="mt-6 space-y-6 font-display text-2xl tracking-tight text-emerald-900">
<p>
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.
</p>
<p>
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.
</p>
</div>
<Button href="#datasets" className="mt-10">
@@ -28,9 +29,11 @@ export function Hero() {
</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">
{[
['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]) => (
<div key={name}>
<dt className="font-mono text-sm text-emerald-600">{name}</dt>
@@ -43,5 +46,5 @@ export function Hero() {
</div>
</Container>
</div>
)
);
}