[simple-example][m] - make it prettier

examples/simple-example/pages/@org/[org]/[...path].tsx

@@ -9,62 +9,86 @@ import { getProject, GithubProject } from '../../../lib/octokit';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Link from 'next/link';
+import Footer from '../../../components/Footer';
+import NavBar from '../../../components/NavBar';
 
 export default function ProjectPage({ project }) {
   return (
     <>
-      <NextSeo title={`PortalJS - @${project.repo_config.owner}/${project.repo_config.repo}${project.base_path !== '/' ? '/' + project.base_path : ''}`} />
-      <main className="prose mx-auto my-8">
-        <Link href='/'>Back to homepage</Link>
-        <h1 className="mb-0">Data</h1>
-        <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>
-                <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) => (
-                <tr key={file.download_url}>
-                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                    <a href={file.download_url}>{file.name}</a>
-                  </td>
-                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                    {file.size} Bytes
-                  </td>
+      <NextSeo
+        title={`PortalJS - @${project.repo_config.owner}/${
+          project.repo_config.repo
+        }${project.base_path !== '/' ? '/' + project.base_path : ''}`}
+      />
+      <NavBar />
+      <main className="mx-auto my-8 max-w-7xl sm:px-6 lg:px-8 px-4">
+        <div className="prose">
+          <h1 className="mb-0">Data</h1>
+        </div>
+        <div className="inline-block min-w-full py-4 align-middle">
+          <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th
+                    scope="col"
+                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+                  >
+                    Name
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Size
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Download
+                  </th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="divide-y divide-gray-200 bg-white">
+                {project.files.map((file) => (
+                  <tr key={file.download_url}>
+                    <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                      {file.name}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {file.size} Bytes
+                    </td>
+                    <td className="px-3 py-4 text-sm text-gray-500">
+                      <a
+                        className="rounded-md bg-indigo-600 no-underline px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                        href={file.download_url}
+                      >
+                        Download file
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
 
-        <h1>Readme</h1>
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-          {project.readmeContent}
-        </ReactMarkdown>
+        <div className="prose py-4 max-w-7xl">
+          <h1>Readme</h1>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {project.readmeContent}
+          </ReactMarkdown>
+        </div>
       </main>
+      <Footer />
     </>
   );
 }
 
 // Generates `/posts/1` and `/posts/2`
 export async function getStaticPaths() {
-  const jsonDirectory = path.join(
-    process.cwd(),
-    'datasets.json'
-  );
+  const jsonDirectory = path.join(process.cwd(), 'datasets.json');
   const repos = await fs.readFile(jsonDirectory, 'utf8');
 
   return {
@@ -88,10 +112,7 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  const jsonDirectory = path.join(
-    process.cwd(),
-    'datasets.json'
-  );
+  const jsonDirectory = path.join(process.cwd(), 'datasets.json');
   const reposFile = await fs.readFile(jsonDirectory, 'utf8');
   const repos: GithubProject[] = JSON.parse(reposFile);
   const repo = repos.find((_repo) => {