[examples/openspending][xs]: center align footer and make file previews wider
This commit is contained in:
deme
@@ -4,21 +4,18 @@ export default function Footer() {
|
|||||||
return (
|
return (
|
||||||
<footer>
|
<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="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">
|
<div className="flex gap-x-2 items-center mx-auto">
|
||||||
<p className="mt-8 text-base text-slate-500 md:mt-0">Maintained by</p>
|
<p className="mt-8 text-base text-slate-500 md:mt-0">Maintained by</p>
|
||||||
<a href="https://www.datopian.com/">
|
<a href="https://www.datopian.com/" target="_blank">
|
||||||
<Image
|
<Image
|
||||||
alt="Datopian logo"
|
alt="Datopian logo"
|
||||||
className="mb-2"
|
className="mb-2"
|
||||||
src="/datopian-logotype.png"
|
src="/datopian-logotype.png"
|
||||||
width={160}
|
width={120}
|
||||||
height={40}
|
height={30}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-6 text-base text-slate-500 md:mt-0">
|
|
||||||
Copyright © 2023 Datopian, LLC. All rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -37,183 +37,185 @@ export default function ProjectPage({
|
|||||||
@{project.repo.full_name}
|
@{project.repo.full_name}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{description && (
|
{description && (
|
||||||
<div className="inline-block min-w-full py-2 align-middle mt-5">
|
<div className="inline-block min-w-full py-2 align-middle mt-5">
|
||||||
{description}
|
{description}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="inline-block min-w-full py-2 align-middle">
|
<div className="inline-block min-w-full py-2 align-middle">
|
||||||
<table className="min-w-full divide-y divide-gray-300">
|
<table className="min-w-full divide-y divide-gray-300">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
{project.datapackage.countryCode && (
|
{project.datapackage.countryCode && (
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Country
|
Country
|
||||||
</th>
|
</th>
|
||||||
)}
|
)}
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Metadata
|
Metadata
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-200">
|
<tbody className="divide-y divide-gray-200">
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
{project.name}
|
{project.name}
|
||||||
</td>
|
</td>
|
||||||
{project.datapackage.countryCode && (
|
{project.datapackage.countryCode && (
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
{project.datapackage.countryCode}
|
{project.datapackage.countryCode}
|
||||||
</td>
|
</td>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
<Link
|
<Link
|
||||||
// TODO: this link may be incorrect for some datasets
|
// TODO: this link may be incorrect for some datasets
|
||||||
href={`https://github.com/${project.owner.name}/${project.repo.name}/blob/main/datapackage.json`}
|
href={`https://github.com/${project.owner.name}/${project.repo.name}/blob/main/datapackage.json`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="flex items-center hover:text-gray-700"
|
className="flex items-center hover:text-gray-700"
|
||||||
>
|
>
|
||||||
datapackage.json <ExternalLinkIcon className="ml-1" />
|
datapackage.json <ExternalLinkIcon className="ml-1" />
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="mb-1 mt-10">Data files</h3>
|
<h3 className="mb-1 mt-10">Data files</h3>
|
||||||
<p>
|
<p>
|
||||||
This dataset contains {project.files.length} file
|
This dataset contains {project.files.length} file
|
||||||
{project.files.length == 1 ? '' : 's'}
|
{project.files.length == 1 ? '' : 's'}
|
||||||
</p>
|
</p>
|
||||||
<div className="inline-block min-w-full py-2 align-middle">
|
<div className="inline-block min-w-full py-2 align-middle">
|
||||||
<table className="mt-0 min-w-full divide-y divide-gray-300">
|
<table className="mt-0 min-w-full divide-y divide-gray-300">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Format
|
Format
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||||
>
|
>
|
||||||
Size
|
Size
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-200">
|
<tbody className="divide-y divide-gray-200">
|
||||||
{project.files?.map((file) => {
|
{project.files?.map((file) => {
|
||||||
let size: number | string = file.size;
|
let size: number | string = file.size;
|
||||||
|
|
||||||
if (!size) {
|
if (!size) {
|
||||||
if (file.bytes) {
|
if (file.bytes) {
|
||||||
if (file.bytes > 1000000) {
|
if (file.bytes > 1000000) {
|
||||||
size = (file.bytes / 1000000).toFixed(2) + ' MB';
|
size = (file.bytes / 1000000).toFixed(2) + ' MB';
|
||||||
} else {
|
} else {
|
||||||
size = (file.bytes / 1000).toFixed(2) + ' kB';
|
size = (file.bytes / 1000).toFixed(2) + ' kB';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<tr key={file.name}>
|
<tr key={file.name}>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
{file.name}
|
{file.name}
|
||||||
</td>
|
</td>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
{file.format}
|
{file.format}
|
||||||
</td>
|
</td>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
{size}
|
{size}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
<Link
|
<Link
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href={
|
href={
|
||||||
file.path.startsWith('http')
|
file.path.startsWith('http')
|
||||||
? file.path
|
? file.path
|
||||||
: `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
|
: `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Download
|
Download
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-y-16 ">
|
<div className="flex flex-col gap-y-16 ">
|
||||||
{project.files?.map((file) => {
|
{project.files?.map((file) => {
|
||||||
let size: number | string = file.size;
|
let size: number | string = file.size;
|
||||||
|
|
||||||
if (!size) {
|
if (!size) {
|
||||||
if (file.bytes) {
|
if (file.bytes) {
|
||||||
if (file.bytes > 1000000) {
|
if (file.bytes > 1000000) {
|
||||||
size = (file.bytes / 1000000).toFixed(2) + ' MB';
|
size = (file.bytes / 1000000).toFixed(2) + ' MB';
|
||||||
} else {
|
} else {
|
||||||
size = (file.bytes / 1000).toFixed(2) + ' kB';
|
size = (file.bytes / 1000).toFixed(2) + ' kB';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div key={file.name}>
|
<div key={file.name} >
|
||||||
{file.path && (
|
{file.path && (
|
||||||
<>
|
<div className='lg:ml-[calc(50%-37vw)] lg:w-[74vw]'>
|
||||||
<h4>
|
<h4>
|
||||||
{file.name}
|
{file.name}
|
||||||
{file.format ? `.${file.format}` : ''}
|
{file.format ? `.${file.format}` : ''}
|
||||||
</h4>
|
</h4>
|
||||||
{file.bytes >= 5132288 && (
|
{file.bytes >= 5132288 && (
|
||||||
<span>Previewing 5MB out of {size}</span>
|
<span>Previewing 5MB out of {size}</span>
|
||||||
)}
|
|
||||||
<FlatUiTable
|
|
||||||
url={
|
|
||||||
file.path.startsWith('http')
|
|
||||||
? file.path
|
|
||||||
: `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{readme && (
|
|
||||||
<>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<h2 className="uppercase font-black">Readme</h2>
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{readme}</ReactMarkdown>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
<div className='mt-5'>
|
||||||
|
<FlatUiTable
|
||||||
|
url={
|
||||||
|
file.path.startsWith('http')
|
||||||
|
? file.path
|
||||||
|
: `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{readme && (
|
||||||
|
<>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<h2 className="uppercase font-black">Readme</h2>
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{readme}</ReactMarkdown>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user