feat: add demo gif

Desdaemon · Jul 22, 2023 · 56370b6 · 56370b6
1 parent a6b21c3
commit 56370b6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 [![npm](https://img.shields.io/npm/v/typed-htmx?style=flat-square)](https://www.npmjs.com/package/typed-htmx)
 
+[![demo](/static/demo.gif)](https://asciinema.org/a/598553)
+
 Definitions for htmx attributes in JSX.
 
 ## Usage

diff --git a/example/index.jsx b/example/index.jsx
@@ -1,5 +1,20 @@
-
-/** @param {{children: any}} _ */
-export function MyComponent({ children }) {
-	return <div hx-get="/">{children} asd</div>;
+export function MyComponent() {
+	return '<!DOCTYPE html>' + (
+		<html lang='en'>
+			<head>
+				<meta charset="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<script src="/static/htmx.min.js"></script>
+			</head>
+			<body hx-boost="true" hx-ext="sse,ws">
+				<form action='/posts' method='post' hx-trigger="reset" hx-vals={{foo: 'bar'}}>
+					<label for='author'>
+						Author
+						<input type='text' name='author'/>
+					</label>
+					<button type='submit'>Submit</button>
+				</form>
+			</body>
+		</html>
+	);
 }
diff --git a/static/demo.gif b/static/demo.gif