61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
137 lines
3.5 KiB
JavaScript
137 lines
3.5 KiB
JavaScript
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import useSWR from "swr";
|
|
import fetcher from "../lib/fetcher";
|
|
import Header from "../components/header";
|
|
import Footer from "../components/footer";
|
|
|
|
export default function Home() {
|
|
const { data, error, isLoading } = useSWR("/api/movies", fetcher);
|
|
|
|
if (error) return <div>failed to load</div>;
|
|
if (isLoading) return <div>loading...</div>;
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<div className="container">
|
|
<Head>
|
|
<title>Next with Neo4j</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<Header />
|
|
<main>
|
|
<div className="movies">
|
|
<div className="subtitle">
|
|
<p>
|
|
<strong>"Movies"</strong> Neo4j example dataset.
|
|
</p>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Movie Title</th>
|
|
<th>Released</th>
|
|
<th>Tagline</th>
|
|
<th>Directed</th>
|
|
<th>Actors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.movies.map((movie, index) => (
|
|
<tr className="movie" key={movie.title}>
|
|
<th>{index + 1}</th>
|
|
<td>
|
|
<Link
|
|
href={`/movie/${encodeURIComponent(movie.title)}`}
|
|
className="link"
|
|
>
|
|
{movie.title}
|
|
</Link>
|
|
</td>
|
|
<td>{movie.released}</td>
|
|
<td>{movie.tagline}</td>
|
|
<td>
|
|
<ul>
|
|
{movie.directed.map((director) => (
|
|
<li key={director}>{director}</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
{movie.actors.map((actor) => (
|
|
<li key={actor}>
|
|
<Link
|
|
href={`/actor/${encodeURIComponent(actor)}`}
|
|
className="link"
|
|
>
|
|
{actor}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<style jsx>{`
|
|
.container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
padding: 0 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
main {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.subtitle {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
.movies {
|
|
flex: 1;
|
|
padding: 0 5rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table thead th {
|
|
vertical-align: middle;
|
|
border-bottom: 2px solid #dee2e6;
|
|
border: 1px solid #dee2e6;
|
|
border-bottom-width: 2px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
table tbody th,
|
|
table tbody td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|