More demo updates

Author: mjackson

demos/bookstore/app/books.tsx

@@ -26,7 +26,7 @@ export default {
                 type="search"
                 name="q"
                 placeholder="Search books by title, author, or description..."
-                style="flex: 1;"
+                css={{ flex: 1, padding: '0.5rem' }}
               />
               <button type="submit" class="btn">
                 Search
@@ -89,20 +89,10 @@ export default {
 
           <div class="grid" style="margin-top: 2rem;">
             {books.map((book) => (
-              <div class="book-card">
-                <img
-                  src={`https://via.placeholder.com/280x300?text=${encodeURIComponent(book.title)}`}
-                  alt={book.title}
-                />
-                <div class="book-card-body">
-                  <h3>{book.title}</h3>
-                  <p class="author">by {book.author}</p>
-                  <p class="price">${book.price.toFixed(2)}</p>
-                  <a href={routes.books.show.href({ slug: book.slug })} class="btn">
-                    View Details
-                  </a>
-                </div>
-              </div>
+              <Frame
+                fallback={<div>Loading...</div>}
+                src={routes.fragments.bookCard.href({ slug: book.slug })}
+              />
             ))}
           </div>
         </Layout>,

demos/bookstore/app/components/book-card.tsx

@@ -1,6 +1,5 @@
 import { routes } from '../../routes.ts'
 
-import { ImageCarousel } from '../assets/image-carousel.tsx'
 import { CartButton } from '../assets/cart-button.tsx'
 import type { Book } from '../models/books.ts'
 
@@ -17,11 +16,13 @@ export function BookCard({ book, inCart }: BookCardProps) {
         <h3>{book.title}</h3>
         <p class="author">by {book.author}</p>
         <p class="price">${book.price.toFixed(2)}</p>
-        <a href={routes.books.show.href({ slug: book.slug })} class="btn">
-          View Details
-        </a>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+          <a href={routes.books.show.href({ slug: book.slug })} class="btn">
+            View Details
+          </a>
 
-        <CartButton inCart={inCart} id={book.id} slug={book.slug} />
+          <CartButton inCart={inCart} id={book.id} slug={book.slug} />
+        </div>
       </div>
     </div>
   )

demos/bookstore/app/layout.tsx

@@ -20,7 +20,14 @@ export function Document({
         <script type="module" async src={routes.assets.href({ path: 'entry.js' })} />
         <style
           innerHTML={`
-          * { margin: 0; padding: 0; box-sizing: border-box; }
+          /* CSS Reset */
+          *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+          button, input, select, textarea { font: inherit; color: inherit; line-height: inherit; }
+          button { background: none; border: none; cursor: pointer; }
+          img { display: block; max-width: 100%; }
+          a { color: inherit; }
+          
+          /* Base Styles */
           body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; }
           .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
           header { background: #2c3e50; color: white; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

demos/bookstore/app/marketing.tsx

@@ -155,10 +155,8 @@ export let contact: RouteHandlers<typeof routes.contact> = {
 
 export let search: InferRouteHandler<typeof routes.search> = {
   use: [loadAuth],
-  handler({ request }) {
-    let url = new URL(request.url)
-    let query = url.searchParams.get('q') || ''
-
+  handler({ url }) {
+    let query = url.searchParams.get('q') ?? ''
     let books = query ? searchBooks(query) : []
 
     return render(
@@ -172,7 +170,7 @@ export let search: InferRouteHandler<typeof routes.search> = {
               name="q"
               placeholder="Search books..."
               value={query}
-              style="flex: 1;"
+              css={{ flex: 1, padding: '0.5rem' }}
             />
             <button type="submit" class="btn">
               Search
@@ -188,22 +186,7 @@ export let search: InferRouteHandler<typeof routes.search> = {
 
         <div class="grid">
           {books.length > 0 ? (
-            books.map((book) => (
-              <div class="book-card">
-                <img
-                  src={`https://via.placeholder.com/280x300?text=${encodeURIComponent(book.title)}`}
-                  alt={book.title}
-                />
-                <div class="book-card-body">
-                  <h3>{book.title}</h3>
-                  <p class="author">by {book.author}</p>
-                  <p class="price">${book.price.toFixed(2)}</p>
-                  <a href={routes.books.show.href({ slug: book.slug })} class="btn">
-                    View Details
-                  </a>
-                </div>
-              </div>
-            ))
+            books.map((book) => <Frame src={routes.fragments.bookCard.href({ slug: book.slug })} />)
           ) : (
             <p>No books found matching your search.</p>
           )}

demos/bookstore/app/models/books.ts

@@ -51,10 +51,10 @@ const booksData: Book[] = [
     id: '003',
     slug: 'three-ways',
     title: 'Three Ways to Change Your Life',
-    author: 'The Great Change Wizard',
+    author: 'Britney Spears',
     description: 'A practical guide to changing your life for the better.',
     price: 28.99,
-    genre: 'science-fiction',
+    genre: 'self-help',
     coverUrl: '/images/three-ways-1.png',
     imageUrls: ['/images/three-ways-1.png', '/images/three-ways-2.png', '/images/three-ways-3.png'],
     isbn: '978-0593135204',