diff --git a/components/Detail.tsx b/components/Detail.tsx
new file mode 100644
index 0000000..733d1e0
--- /dev/null
+++ b/components/Detail.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import { DetailedBook } from "../lib/books";
+
+export default function Detail(props: Props) {
+ return
{props.book.title}
;
+}
+
+interface Props {
+ book: DetailedBook;
+}
diff --git a/components/List.tsx b/components/List.tsx
new file mode 100644
index 0000000..cc66315
--- /dev/null
+++ b/components/List.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { SimpleBook } from "../lib/books";
+
+export default function List(props: Props) {
+ return (
+
+ {props.books.map((book, idx) => {
+ return (
+ -
+ {book.id}; {book.title}; {book.authors}; {book.isbn}
+
+ );
+ })}
+
+ );
+}
+
+interface Props {
+ books: SimpleBook[];
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index dcf23ac..126e9de 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,34 +1,5 @@
import React from "react";
-import { getBook, getAllBooks, DetailedBook, SimpleBook } from "../lib/books";
-
-export default function Home(props: Props) {
- return (
-
-
- {props.books.map((book, idx) => {
- return (
- -
- {book.id}; {book.title}; {book.authors}; {book.isbn}
-
- );
- })}
-
-
{props.book.title}
-
- );
-}
-
-interface Props {
- book: DetailedBook;
- books: SimpleBook[];
-}
-
-export async function getServerSideProps() {
- return {
- props: {
- book: await getBook(44),
- books: await getAllBooks(),
- },
- };
+export default function Home() {
+ return ;
}
diff --git a/pages/playground.tsx b/pages/playground.tsx
new file mode 100644
index 0000000..543dcde
--- /dev/null
+++ b/pages/playground.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import Detail from "../components/Detail";
+import List from "../components/List";
+import { DetailedBook, SimpleBook, getBook, getAllBooks } from "../lib/books";
+
+export default function Playground(props: Props) {
+ return (
+
+
Detail
+
+
+ List
+
+
+
+ );
+}
+
+export async function getServerSideProps() {
+ return {
+ props: {
+ book: await getBook(44),
+ books: await getAllBooks(),
+ },
+ };
+}
+
+interface Props {
+ book: DetailedBook;
+ books: SimpleBook[];
+}