diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-12 12:17:36 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-12 12:17:36 -0400 |
| commit | ab232dd10f8d8ae5a3654293a1f1429343990039 (patch) | |
| tree | 1cb3f510b6e1fa12e5503fdcb8c4ef73fd7ffa95 /examples/blog/src/components/LikeButton.tsx | |
| parent | 4bf47367687b67170e6c3c722f514b5c2e67519d (diff) | |
| download | astro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.gz astro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.zst astro-ab232dd10f8d8ae5a3654293a1f1429343990039.zip | |
Example blog rework (#3896)
* refactor: restructure components, kill dead code
* nit: tweak base styles
* nit: remove unneeded code comments
* refactor: replace unused permalink with canonicalURL
* refactor: add missing prop types
* feat: make markdown examples more interesting
* chore: consistent semis and quotes
* chore: astro check failures
* fix: bad url prop
* fix: bad frontmatter quote
* chore: more dead styles
* chore: add header gap
* refactor: use tsx for likebutton
* fix: restore post sorting
* chore: remove unused flex-row util
* fix: small md formatting on README
* chore: run through astro-plugin-prettier
* fix: revert to double quotes
* fix: manually move style outside <body>
* fix: update file tree in README
* refactor: publish-date -> time
* refactor: remove unused div and margin
* refactor: publishDate -> time on layout
* refactor: .heroImage -> img
* refactor: .logo -> svg
* feat: update social image, remove jpg
* fix: remove prism stylesheet!
Diffstat (limited to 'examples/blog/src/components/LikeButton.tsx')
| -rw-r--r-- | examples/blog/src/components/LikeButton.tsx | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/examples/blog/src/components/LikeButton.tsx b/examples/blog/src/components/LikeButton.tsx new file mode 100644 index 000000000..d477cee1e --- /dev/null +++ b/examples/blog/src/components/LikeButton.tsx @@ -0,0 +1,35 @@ +import { useState } from "preact/hooks"; + +interface Props { + pageUrl: string; +} + +export default function LikeButton({ pageUrl }: Props) { + const persistedLike = localStorage.getItem(`liked-${pageUrl}`); + const [liked, setLiked] = useState(persistedLike ? JSON.parse(persistedLike) : false); + + function toggleLike() { + const toggled = !liked; + setLiked(toggled); + // preserve your likes as you navigate the site + localStorage.setItem(`liked-${pageUrl}`, JSON.stringify(toggled)); + } + + return ( + <button onClick={toggleLike}> + <svg + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + width="1em" + height="1em" + viewBox="0 0 24 24" + > + {/* fill the heart when liked ♥ */} + <path + fill={liked ? "red" : "#ccc"} + d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z" + ></path> + </svg> + </button> + ); +} |