Skip to content

Instantly share code, notes, and snippets.

@PCreations
Created September 16, 2024 19:26
Show Gist options
  • Save PCreations/d7488381ec51c90fd25aed47a9ed25dd to your computer and use it in GitHub Desktop.
Save PCreations/d7488381ec51c90fd25aed47a9ed25dd to your computer and use it in GitHub Desktop.
d2a4d280d64e.diff
-0,0 +1,46 @@
+import * as elements from 'typed-html';
+import { Button } from './button';
+import { Toast } from './toast';
+
+export const AddBookForm = ({
+ inputPlaceholder,
+ toast,
+}: {
+ inputPlaceholder: string;
+ toast?: {
+ type: 'error' | 'success';
+ title: string;
+ message: string;
+ };
+}) => {
+ return (
+ <div id="add-book-form">
+ <form
+ action="/"
+ class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+ method="post"
+ hx-boost="true"
+ hx-target="#add-book-form"
+ hx-swap="outerHTML"
+ >
+ <div class="mb-4">
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="title">
+ Title
+ </label>
+ <input
+ class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+ id="title"
+ type="text"
+ name="title"
+ placeholder={inputPlaceholder}
+ required="required"
+ />
+ </div>
+ <Button name="Add Book" type="submit" />
+ </form>
+ {toast && (
+ <Toast title={toast.title} message={toast.message} type={toast.type} />
+ )}
+ </div>
+ );
+};
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 374ef1c..2e46779 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment