calibretest

Frontend/src/App.tsx

@@ -1,22 +1,18 @@
 import type { Component } from "solid-js";
 import { createSignal, For, onMount } from "solid-js";
-
-interface Weather {
-	date: string;
-	temperatureC: number;
-	temperatureF: number;
-	summary: string;
-}
+import CalibreService from "./services/calibreservice";
+import { book } from "./types/calibretypes";
+import BookCard from "./components/BookCard";
 
 const App: Component = () => {
-	const [weather, setWeather] = createSignal<Weather[]>([]);
+	const [books, setBooks] = createSignal<book[]>([]);
 	onMount(() => {
-		fetch("/api/weatherforecast")
-			.then((r) => r.json())
-			.then(setWeather);
+		CalibreService.getBooks().then(setBooks);
 	});
 	return (
 		<div>
+			<button class="btn btn-primary">primary knapp</button>
+			<button class="btn btn-blue">blå knapp</button>
 			<header>
 				<p>
 					Edit <code>src/App.tsx</code> and save to reload.
@@ -30,14 +26,9 @@ const App: Component = () => {
 				</a>
 			</header>
 
-			<For each={weather()}>
-				{(item) => (
-					<li>
-						{item.date} - {item.temperatureC}°C / {item.temperatureF}°F -{" "}
-						{item.summary}
-					</li>
-				)}
-			</For>
+			<div class="book-grid text-base-content mx-auto grid gap-6 pb-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 [&_.carbon-responsive-wrap]:flex-nowrap! [&_.carbon-responsive-wrap]:text-[11px]! [&_:is(div,button)]:[transition:background-color_0ms,border-color_100ms,box-shadow_300ms,border-radius_500ms_ease-out] [&>*]:mb-6">
+				<For each={books()}>{(item) => <BookCard book={item} />}</For>
+			</div>
 		</div>
 	);
 };