Tailwind redesign (#2387)

components/view-counter.tsx

@@ -0,0 +1,31 @@
+import { env } from "@/lib/env";
+import { connection } from "next/server";
+import { kv } from "@vercel/kv";
+import CountUp from "@/components/count-up";
+
+const ViewCounter = async ({ slug }: { slug: string }) => {
+  // ensure this component isn't triggered by prerenders and/or preloads
+  await connection();
+
+  try {
+    // if this is a new slug, redis will automatically create a new key and set its value to 0 (and then 1, obviously)
+    // https://upstash.com/docs/redis/sdks/ts/commands/string/incr
+    // TODO: maybe don't allow this? or maybe it's fine? kinda unclear how secure this is:
+    // https://nextjs.org/blog/security-nextjs-server-components-actions
+    // https://nextjs.org/docs/app/building-your-application/rendering/server-components
+    const hits = await kv.incr(`hits:${slug}`);
+
+    // we have data!
+    return (
+      <span title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(hits)} ${hits === 1 ? "view" : "views"}`}>
+        <CountUp start={0} end={hits} delay={0} duration={1.5} />
+      </span>
+    );
+  } catch (error) {
+    console.error("[view-counter] fatal error:", error);
+
+    return <span title="Error getting views! :(">?</span>;
+  }
+};
+
+export default ViewCounter;