feat: enhance HomePage and LikeButton functionality

Kan-A-Pesh · Kan-A-Pesh · commit c11da34ae1af · 2025-09-24T21:12:54.000+02:00
- Replaced LikeButton with LikeWrapper to manage initial like count from Redis
- Improved HomePage layout with additional padding for better readability
- Added floating heart animation to LikeButton for enhanced user interaction
- Updated LikeButton to handle optimistic updates and manage floating hearts state
- Adjusted footer layout for better responsiveness and alignment
diff --git a/demo/app/page.tsx b/demo/app/page.tsx
@@ -1,6 +1,3 @@
-import LikeButton from "@/components/like-button";
-import { getRedis } from "@/lib/redis";
-import { incrementLikesAction } from "./actions";
 import {
   codeExampleToJsx,
   dockerCommand,
@@ -23,24 +20,22 @@ import { Terminal } from "lucide-react";
 import Accordion from "@/components/accordion";
 import { RiDiscordFill, RiGithubFill } from "@remixicon/react";
 import Link from "next/link";
+import LikeWrapper from "@/components/like-wrapper";
 
 export default async function HomePage() {
-  const redis = getRedis();
-  const initialCount = Number(await redis.get("demo:likes")) || 0;
-
   return (
     <main className="border-x border-gray-700 min-h-screen mx-auto w-[90vw] max-w-4xl pt-[10vh]">
       <hr className="absolute left-0 right-0 border-gray-700" />
       <header className="flex flex-col gap-4 items-center text-center justify-center h-[80vh]">
-        <h1 className="text-5xl font-bold leading-tight">
+        <h1 className="text-5xl font-bold leading-tight px-4">
           Type-safe live updates <br />
           in minutes
         </h1>
-        <p className="text-lg text-gray-500">
+        <p className="text-lg text-gray-500 px-4">
           Zero-config SSE. Shared types. Simple client & server helpers.
         </p>
 
-        <LikeButton initialCount={initialCount} onLike={incrementLikesAction} />
+        <LikeWrapper />
       </header>
 
       <hr className="absolute left-0 right-0 border-gray-700" />
@@ -97,7 +92,7 @@ export default async function HomePage() {
         </div>
       </section>
 
-      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center">
+      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center px-4">
         Let&rsquo;s get started!
       </h2>
       <hr className="absolute left-0 right-0 border-gray-700" />
@@ -159,19 +154,21 @@ export default async function HomePage() {
         </div>
 
         <div className="px-4 py-8 flex flex-col gap-4 border-b border-gray-700">
-          <h3 className="text-xl font-mono text-gray-300">4. You&rsquo;re done</h3>
+          <h3 className="text-xl font-mono text-gray-300">
+            4. You&rsquo;re done
+          </h3>
           <p className="text-gray-400">
             Perfect! You&rsquo;re now free to add more events to your app.
           </p>
           <p className="text-gray-400">
             You may want more customizations, like authentication or topics.
             <br />
-            Follow the link below to learn more.
+            Follow the <code>Deep dive!</code> section below to learn more.
           </p>
         </div>
       </section>
 
-      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center">
+      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center px-4">
         Deep dive!
       </h2>
       <hr className="absolute left-0 right-0 border-gray-700" />
@@ -246,27 +243,27 @@ export default async function HomePage() {
         <hr className="w-full border-gray-700" />
       </section>
 
-      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center">
+      <h2 className="text-4xl font-bold mt-32 mb-8 w-full text-center px-4">
         Missing something?
       </h2>
       <hr className="absolute left-0 right-0 border-gray-700" />
 
-      <section className="flex flex-col items-center justify-center pt-24 pb-36 gap-4">
+      <section className="flex flex-col items-center justify-center pt-24 pb-36 gap-4 px-4">
         <p className="text-gray-400 text-center max-w-2xl">
           If you&rsquo;re missing something,
           <br />
           feel free to open an issue on the GitHub repository or discuss it on
           the Discord server.
         </p>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-wrap justify-center">
           <Link
             href="https://github.com/impulse-studio/realtime"
             target="_blank"
             className="bg-white text-black px-6 py-3 rounded-2xl flex items-center gap-2 font-medium hover:bg-gray-200 relative cursor-pointer"
           >
             <div className="absolute left-0.5 right-0.5 bottom-0.5 rounded-b-2xl bg-gradient-to-t pointer-events-none h-4 from-black to-transparent opacity-20" />
             <RiGithubFill />
-            Open in GitHub
+            <span className="text-nowrap">Open in GitHub</span>
           </Link>
           <Link
             href="https://discord.gg/bBWXedJwWN"
@@ -275,14 +272,14 @@ export default async function HomePage() {
           >
             <div className="absolute left-0.5 right-0.5 bottom-0.5 rounded-b-2xl bg-gradient-to-t pointer-events-none h-4 from-black to-transparent opacity-20" />
             <RiDiscordFill />
-            Open in Discord
+            <span className="text-nowrap">Open in Discord</span>
           </Link>
         </div>
       </section>
 
       <hr className="absolute left-0 right-0 border-gray-700" />
-      <footer className="flex items-center p-8 gap-4">
-        <span className="text-gray-400 me-auto">
+      <footer className="flex items-center p-8 gap-4 justify-between flex-col sm:flex-row">
+        <span className="text-gray-400">
           Made with ❤️ by{" "}
           <Link
             href="https://impulselab.ai"
@@ -293,34 +290,36 @@ export default async function HomePage() {
           </Link>
         </span>
 
-        <Link
-          href="https://github.com/impulse-studio/realtime"
-          target="_blank"
-          className="text-amber-400 hover:text-amber-600"
-        >
-          GitHub
-        </Link>
-        <Link
-          href="https://discord.gg/bBWXedJwWN"
-          target="_blank"
-          className="text-amber-400 hover:text-amber-600"
-        >
-          Discord
-        </Link>
-        <Link
-          href="https://x.com/impulselab_ai"
-          target="_blank"
-          className="text-amber-400 hover:text-amber-600"
-        >
-          X
-        </Link>
-        <Link
-          href="https://linkedin.com/company/impulselab"
-          target="_blank"
-          className="text-amber-400 hover:text-amber-600"
-        >
-          LinkedIn
-        </Link>
+        <div className="flex items-center gap-4 flex-wrap justify-center">
+          <Link
+            href="https://github.com/impulse-studio/realtime"
+            target="_blank"
+            className="text-amber-400 hover:text-amber-600"
+          >
+            GitHub
+          </Link>
+          <Link
+            href="https://discord.gg/bBWXedJwWN"
+            target="_blank"
+            className="text-amber-400 hover:text-amber-600"
+          >
+            Discord
+          </Link>
+          <Link
+            href="https://x.com/impulselab_ai"
+            target="_blank"
+            className="text-amber-400 hover:text-amber-600"
+          >
+            X
+          </Link>
+          <Link
+            href="https://linkedin.com/company/impulselab"
+            target="_blank"
+            className="text-amber-400 hover:text-amber-600"
+          >
+            LinkedIn
+          </Link>
+        </div>
       </footer>
     </main>
   );
diff --git a/demo/components/docker-icon.tsx b/demo/components/docker-icon.tsx
@@ -1,6 +1,7 @@
 export default function DockerIcon() {
   return (
     <svg
+      className="size-6 min-w-6 min-h-6"
       width="24"
       height="24"
       viewBox="0 0 64 64"
diff --git a/demo/components/like-button.tsx b/demo/components/like-button.tsx
@@ -1,37 +1,65 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { motion, useAnimate } from "motion/react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { motion, useAnimate, AnimatePresence } from "motion/react";
 import { getClientRealtime } from "../lib/realtime/client";
 import { HeartIcon } from "lucide-react";
 
+interface FloatingHeart {
+  id: string;
+  left: number;
+}
+
 interface LikeButtonProps {
   initialCount: number;
-  onLike: (formData: FormData) => Promise<void>;
+  onLike: () => Promise<void>;
 }
 
 export default function LikeButton({ initialCount, onLike }: LikeButtonProps) {
   const [count, setCount] = useState(initialCount);
   const [scope, animate] = useAnimate();
+  const [floatingHearts, setFloatingHearts] = useState<FloatingHeart[]>([]);
+  const timeoutsRef = useRef<Set<NodeJS.Timeout>>(new Set());
+
+  const spawnFloatingHeart = useCallback(() => {
+    const id = `heart-${Date.now()}-${Math.random()}`;
+    const left = Math.random() * 100;
+
+    setFloatingHearts((prev) => [...prev, { id, left }]);
+
+    const timeout = setTimeout(() => {
+      setFloatingHearts((prev) => prev.filter((heart) => heart.id !== id));
+      timeoutsRef.current.delete(timeout);
+    }, 2500);
+
+    timeoutsRef.current.add(timeout);
+  }, []);
 
   useEffect(() => {
     const client = getClientRealtime();
 
     const unsubscribe = client.subscribe("demo:likes:updated", (event) => {
-      try {
-        setCount(event.payload.count);
-      } catch (error) {
-        console.error("Error handling likes update:", error);
-      }
+      spawnFloatingHeart();
+      setCount((prev) => Math.max(prev, event.payload.count));
     });
 
+    return unsubscribe;
+  }, [spawnFloatingHeart]);
+
+  useEffect(() => {
     return () => {
-      unsubscribe();
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      timeoutsRef.current.clear();
     };
   }, []);
 
+  const handleOptimisticLike = useCallback(async () => {
+    setCount((prev) => prev + 1);
+    await onLike();
+  }, [count, onLike]);
+
   return (
-    <div className="relative mt-8 border rounded-2xl w-80 h-48 mx-4 flex items-center justify-center border-gray-800 bg-gray-950 bg-[linear-gradient(rgba(75,85,99,0.3)_1px,transparent_1px),linear-gradient(90deg,rgba(75,85,99,0.3)_1px,transparent_1px)] bg-[size:24px_24px] bg-center">
+    <div className="relative mt-8 border rounded-2xl w-80 h-48 mx-4 flex items-center justify-center border-gray-800 bg-gray-950 bg-[linear-gradient(rgba(75,85,99,0.3)_1px,transparent_1px),linear-gradient(90deg,rgba(75,85,99,0.3)_1px,transparent_1px)] bg-[size:24px_24px] bg-center overflow-hidden">
       <div className="absolute right-4 bottom-2 flex">
         <svg
           width="34"
@@ -61,35 +89,69 @@ export default function LikeButton({ initialCount, onLike }: LikeButtonProps) {
         </p>
       </div>
 
-      <form action={onLike}>
-        <motion.button
-          ref={scope}
-          type="submit"
-          className="bg-gradient-to-t from-amber-700 to-amber-600 text-white rounded-2xl px-4 py-2 flex items-center gap-2 relative hover:from-amber-600 hover:to-amber-500 cursor-pointer"
-          whileTap={{ scale: 0.95 }}
-          onTapStart={() => {
-            const dx = (Math.random() - 0.5) * 8;
-            const dy = (Math.random() - 0.5) * 8;
-            const dr = (Math.random() - 0.5) * 10;
-            animate(
-              scope.current,
-              {
-                x: [0, dx, -dx, 0],
-                y: [0, dy, -dy, 0],
-                rotate: [0, dr, -dr, 0],
-              },
-              {
-                duration: 0.25,
-                ease: [0.16, 1, 0.3, 1],
-              }
-            );
-          }}
-        >
-          <div className="absolute left-0.5 right-0.5 bottom-0.5 rounded-b-2xl bg-gradient-to-t pointer-events-none h-4 from-white to-transparent opacity-30" />
-          <HeartIcon fill="currentColor" className="w-4 h-4" />
-          {count}
-        </motion.button>
-      </form>
+      <AnimatePresence>
+        {floatingHearts.map((heart) => (
+          <motion.div
+            key={heart.id}
+            className="absolute pointer-events-none"
+            style={{
+              left: `${heart.left}%`,
+              bottom: "-24px",
+            }}
+            initial={{
+              opacity: 0.8,
+              scale: 1.2,
+              y: 0,
+              x: 0,
+            }}
+            animate={{
+              opacity: 0,
+              scale: 0.8,
+              y: -200 - Math.random() * 100,
+              x: (Math.random() - 0.5) * 40,
+            }}
+            exit={{
+              opacity: 0,
+              scale: 0.3,
+            }}
+            transition={{
+              duration: 2.5,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+          >
+            <HeartIcon fill="currentColor" className="w-6 h-6 text-amber-500" />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      <motion.button
+        ref={scope}
+        type="button"
+        onClick={handleOptimisticLike}
+        className="bg-gradient-to-t from-amber-700 to-amber-600 text-white rounded-2xl px-4 py-2 flex items-center gap-2 relative hover:from-amber-600 hover:to-amber-500 cursor-pointer"
+        whileTap={{ scale: 0.95 }}
+        onTapStart={() => {
+          const dx = (Math.random() - 0.5) * 8;
+          const dy = (Math.random() - 0.5) * 8;
+          const dr = (Math.random() - 0.5) * 10;
+          animate(
+            scope.current,
+            {
+              x: [0, dx, -dx, 0],
+              y: [0, dy, -dy, 0],
+              rotate: [0, dr, -dr, 0],
+            },
+            {
+              duration: 0.25,
+              ease: [0.16, 1, 0.3, 1],
+            }
+          );
+        }}
+      >
+        <div className="absolute left-0.5 right-0.5 bottom-0.5 rounded-b-2xl bg-gradient-to-t pointer-events-none h-4 from-white to-transparent opacity-30" />
+        <HeartIcon fill="currentColor" className="w-4 h-4" />
+        {count}
+      </motion.button>
     </div>
   );
 }
diff --git a/demo/components/like-wrapper.tsx b/demo/components/like-wrapper.tsx
@@ -0,0 +1,10 @@
+import { incrementLikesAction } from "@/app/actions";
+import LikeButton from "./like-button";
+import { getRedis } from "@/lib/redis";
+
+export default async function LikeWrapper() {
+  const initialCount = Number(await getRedis().get("demo:likes")) || 0;
+  return (
+    <LikeButton initialCount={initialCount} onLike={incrementLikesAction} />
+  );
+}
