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

[examples/538][sm] - bug fixes + favicon

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes
2023-05-09 15:06:26 -03:00
parent a954575397
commit 714faf9986
3 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/fiverthirtyeight-example/pages/_document.tsx
View File

@@ -1,13 +1,19 @@
import { Html, Head, Main, NextScript } from 'next/document' import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() { export default function Document() {
return ( return (
<Html lang="en"> <Html lang="en">
<Head /> <Head>
<link
rel="icon"
type="image/x-icon"
href="https://projects.fivethirtyeight.com/shared/favicon.ico"
/>
</Head>
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>
</Html> </Html>
) );
} }

13
examples/fiverthirtyeight-example/pages/api/hello.ts
View File

@@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

8
examples/fiverthirtyeight-example/pages/index.tsx
View File

@@ -25,7 +25,7 @@ export function MobileItem({dataset} : { dataset: Dataset}) {
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-light">{dataset.name}</span> <span className="font-light">{dataset.name}</span>
{dataset.articles.map((article) => ( {dataset.articles.map((article) => (
<div className='py-1 flex flex-col'> <div key={article.title} className='py-1 flex flex-col'>
<span className="font-bold hover:underline">{article.title}</span> <span className="font-bold hover:underline">{article.title}</span>
<span className="font-light text-base">{format(article.date)}</span>{' '} <span className="font-light text-base">{format(article.date)}</span>{' '}
</div> </div>
@@ -63,7 +63,7 @@ export function DesktopItem({dataset} : { dataset: Dataset}) {
return ( return (
<> <>
{dataset.articles.map((article, index) => ( {dataset.articles.map((article, index) => (
<tr className={`${index === (dataset.articles.length - 1) ? 'border-b' : ''} border-zinc-400`}> <tr key={article.url} className={`${index === (dataset.articles.length - 1) ? 'border-b' : ''} border-zinc-400`}>
<td className="py-8 font-light">{index === 0 ? dataset.name : ''}</td> <td className="py-8 font-light">{index === 0 ? dataset.name : ''}</td>
<td> <td>
<a className="py-8 font-bold hover:underline" href={article.url}> <a className="py-8 font-bold hover:underline" href={article.url}>
@@ -148,7 +148,7 @@ export default function Home( { datasets }: { datasets: Dataset[] }) {
stories and visualizations of&nbsp;your&nbsp;own. stories and visualizations of&nbsp;your&nbsp;own.
</p> </p>
</div> </div>
<article className="w-full px-2 md:hidden py-4">{datasets.map(dataset => <MobileItem dataset={dataset} />)}</article> <article className="w-full px-2 md:hidden py-4">{datasets.map(dataset => <MobileItem key={dataset.name} dataset={dataset} />)}</article>
<table className="w-full mt-10 mb-4 hidden md:table"> <table className="w-full mt-10 mb-4 hidden md:table">
<thead className="border-b-4 pb-2 border-zinc-900"> <thead className="border-b-4 pb-2 border-zinc-900">
<tr> <tr>
@@ -163,7 +163,7 @@ export default function Home( { datasets }: { datasets: Dataset[] }) {
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody>{datasets.map(dataset => <DesktopItem dataset={dataset} />)}</tbody> <tbody>{datasets.map(dataset => <DesktopItem key={dataset.name} dataset={dataset} />)}</tbody>
</table> </table>
<p className="text-[13px] py-8"> <p className="text-[13px] py-8">
Unless otherwise noted, our data sets are available under the{' '} Unless otherwise noted, our data sets are available under the{' '}