diff options
| author |  Austin Crim <aust.crim@gmail.com>
| 2021-06-28 07:02:59 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-28 07:02:59 -0500 |
| commit | 3c26035f535d4e54a60fde871a75fb4371ccdbe8 (patch) | |
| tree | 75b37a3caf9ac3be607a6c9df0cbb71fb07392d2 /examples/with-preact/src | |
| parent | 436783d059ad70e1f7d8438d9eefcb9c5257e2d3 (diff) | |
| download | astro-3c26035f535d4e54a60fde871a75fb4371ccdbe8.tar.gz astro-3c26035f535d4e54a60fde871a75fb4371ccdbe8.tar.zst astro-3c26035f535d4e54a60fde871a75fb4371ccdbe8.zip | |
Split out specific framework examples (#559)
* rename kitchen sink, pull out react example
* split out the rest of the examples
* align versions
Co-authored-by: Austin Crim <crim.austin@principal.com>
Diffstat (limited to 'examples/with-preact/src')
| -rw-r--r-- | examples/with-preact/src/components/Counter.tsx | 19 | ||||
| -rw-r--r-- | examples/with-preact/src/pages/index.astro | 38 |
2 files changed, 57 insertions, 0 deletions
diff --git a/examples/with-preact/src/components/Counter.tsx b/examples/with-preact/src/components/Counter.tsx new file mode 100644 index 000000000..7c520b167 --- /dev/null +++ b/examples/with-preact/src/components/Counter.tsx @@ -0,0 +1,19 @@ +import { h, Fragment } from 'preact'; +import { useState } from 'preact/hooks'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); +} diff --git a/examples/with-preact/src/pages/index.astro b/examples/with-preact/src/pages/index.astro new file mode 100644 index 000000000..66fa9e84b --- /dev/null +++ b/examples/with-preact/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.jsx' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello Preact!</h1> + </Counter:visible> + </main> + </body> +</html> |