Merge pull request #15694 from ethereum/hot-fix-resources

[hot-fix] resources page to ssr

Author: corwintines

app/[locale]/resources/_components/ResourcesNav.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import { cn } from "@/lib/utils/cn"
+
+import type { DashboardSection } from "../types"
+
+import { useActiveHash } from "@/hooks/useActiveHash"
+
+const ResourcesNav = ({
+  resourceSections,
+  eventCategory,
+}: {
+  resourceSections: DashboardSection[]
+  eventCategory: string
+}) => {
+  const activeSection = useActiveHash(
+    resourceSections.map(({ key }) => key),
+    "0% 0% -70% 0%"
+  ).replace(/^#/, "")
+
+  return (
+    <nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
+      {resourceSections.map(({ key, title, icon }) => (
+        <ButtonLink
+          key={key}
+          href={`#${key}`}
+          variant="ghost"
+          isSecondary
+          className={cn(
+            "relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
+            activeSection === key && "!text-primary"
+          )}
+          customEventOptions={{
+            eventCategory,
+            eventAction: "whats_on_this_page",
+            eventName: key,
+          }}
+        >
+          {activeSection === key && (
+            <motion.div
+              layoutId="active-section-highlight"
+              className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
+            />
+          )}
+          {icon && <span className="z-10 text-lg">{icon}</span>}
+          <span className="relative z-10">{title}</span>
+        </ButtonLink>
+      ))}
+    </nav>
+  )
+}
+
+export default ResourcesNav

src/components/Resources/index.tsx renamed to app/[locale]/resources/_components/ResourcesUI.tsx

@@ -3,9 +3,8 @@ import { Tag } from "@/components/ui/tag"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Image } from "../Image"
-
-import { Item } from "./types"
+import { Image } from "../../../../src/components/Image"
+import { Item } from "../types"
 
 export const DashboardBox = ({
   className,

app/[locale]/resources/_components/SlotCountdown.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useLocale } from "next-intl"
+
+import RadialChart from "@/components/RadialChart"
+
+const SlotCountdownChart = ({ children }: { children: string }) => {
+  const [timeToNextBlock, setTimeToNextBlock] = useState(12)
+  const locale = useLocale()
+
+  useEffect(() => {
+    const genesisTime = new Date("2020-12-01T12:00:23Z").getTime()
+    const updateTime = () => {
+      const now = Date.now()
+      const timeElapsed = (now - genesisTime) / 1000
+      const timeToNext = 12 - (timeElapsed % 12)
+      setTimeToNextBlock(Math.floor(timeToNext) || 12)
+    }
+
+    updateTime()
+    const interval = setInterval(updateTime, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <RadialChart
+      value={timeToNextBlock}
+      totalValue={12}
+      displayValue={new Intl.NumberFormat(locale, {
+        style: "unit",
+        unit: "second",
+        unitDisplay: "narrow",
+      }).format(timeToNextBlock)}
+      label={children}
+    />
+  )
+}
+
+export default SlotCountdownChart