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

[examples/openspending] - openspending v0.2

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes
2023-05-30 09:06:22 -03:00
parent cb7d801968
commit b0b9631c8d
480 changed files with 24167 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/openspending/components/DatasetsSearch.tsx
View File

@@ -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"
/>

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

@@ -16,18 +16,22 @@ 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"
},
{
title: "Resources",
href: "/resources"
}
];
return (
@@ -51,7 +55,7 @@ export function Header() {
</li>
))}
</ul>
<div className="hidden xl:block xl:grow"></div>
<div className='hidden aria-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" />

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

@@ -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>

17
examples/openspending/components/MDXPage.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { MDXRemote } from 'next-mdx-remote';
import layouts from '../layouts';
export default function MDXPage({ source, frontMatter }) {
const Layout = ({ children }) => {
const layoutName = frontMatter?.layout || 'default';
const LayoutComponent = layouts[layoutName];
return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
};
return (
<Layout>
<MDXRemote {...source} components={[]} />
</Layout>
);
}

13
examples/openspending/components/_shared/Footer.tsx Normal file
View File

@@ -0,0 +1,13 @@
import Image from 'next/image'
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">
<Image alt="Datopian logo" src="/datopian-logotype.png" width={160} height={40} />
<p className="mt-6 text-base text-slate-500 md:mt-0">
Copyright © 2023 Datopian, LLC. All rights reserved.
</p>
</div>
</footer>
);
}

4
examples/openspending/components/_shared/Layout.tsx
View File

@@ -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>
);
}