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>
+	);
+}