, string>(query, searchBooks);
+
+ return (
+ <>
+
+ Searching...}>
+
+
+ {(book) => (
+ -
+ {book.title} by {book.author}{" "}
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/solidjs-tutorial/src/App.module.css b/solidjs-tutorial/src/App.module.css
new file mode 100644
index 0000000..48308b2
--- /dev/null
+++ b/solidjs-tutorial/src/App.module.css
@@ -0,0 +1,33 @@
+.App {
+ text-align: center;
+}
+
+.logo {
+ animation: logo-spin infinite 20s linear;
+ height: 40vmin;
+ pointer-events: none;
+}
+
+.header {
+ background-color: #282c34;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+}
+
+.link {
+ color: #b318f0;
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/solidjs-tutorial/src/App.tsx b/solidjs-tutorial/src/App.tsx
new file mode 100644
index 0000000..26e5e8b
--- /dev/null
+++ b/solidjs-tutorial/src/App.tsx
@@ -0,0 +1,17 @@
+import type { Component } from "solid-js";
+import Bookshelf from "./Bookshelf";
+
+export type Book = {
+ title: string;
+ author: string;
+};
+
+const App: Component = () => {
+ return (
+ <>
+
+
+ );
+};
+
+export default App;
diff --git a/solidjs-tutorial/src/BookList.tsx b/solidjs-tutorial/src/BookList.tsx
new file mode 100644
index 0000000..f7800c1
--- /dev/null
+++ b/solidjs-tutorial/src/BookList.tsx
@@ -0,0 +1,29 @@
+import { For } from "solid-js";
+
+import type { Book } from "./App";
+
+interface IBookListProps {
+ books: Book[];
+}
+
+export default function BookList(props: IBookListProps) {
+ const totalBooks = () => props.books.length;
+
+ return (
+ <>
+ My books ({totalBooks()})
+
+
+ {(book) => {
+ return (
+ -
+ {book.title}{" "}
+ ({book.author})
+
+ );
+ }}
+
+
+
+ );
+}
diff --git a/solidjs-tutorial/src/Bookshelf.tsx b/solidjs-tutorial/src/Bookshelf.tsx
new file mode 100644
index 0000000..8ee6f44
--- /dev/null
+++ b/solidjs-tutorial/src/Bookshelf.tsx
@@ -0,0 +1,36 @@
+import { createSignal, Show } from "solid-js";
+
+import AddBook from "./AddBook";
+import BookList from "./BookList";
+
+import type { Book } from "./App";
+
+interface IBookshelfProps {
+ name: string;
+}
+
+const initialBooks: Book[] = [
+ { title: "Code Complete", author: "Steve McConnell" },
+ { title: "The Hobbit", author: "J.R.R. Tolkien" },
+ { title: "Living a Feminist Life", author: "Sarah Ahmed" },
+];
+
+export default function Bookshelf(props: IBookshelfProps) {
+ const [books, setBooks] = createSignal(initialBooks);
+ const [showForm, setShowForm] = createSignal(false);
+ const toggleForm = () => setShowForm(!showForm());
+
+ return (
+
+
{props.name}'s Bookshelf
+
+
Finished adding books}
+ >
+
+
+
+