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