Merge pull request #15697 from ethereum/staging

Staging

Author: corwintines

app/[locale]/enterprise/page.tsx

@@ -9,7 +9,6 @@ import Checkmark from "@/components/icons/checkmark.svg"
 import Adidas from "@/components/icons/enterprise/adidas.svg"
 import Azure from "@/components/icons/enterprise/azure.svg"
 import BancoSantander from "@/components/icons/enterprise/banco-santander.svg"
-import BASF from "@/components/icons/enterprise/basf.svg"
 import BlackRock from "@/components/icons/enterprise/blackrock.svg"
 import BMW from "@/components/icons/enterprise/bmw.svg"
 import CocaCola from "@/components/icons/enterprise/coca-cola.svg"
@@ -183,8 +182,13 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
       ),
     },
     {
-      name: "T-Mobile & SK Telecom",
-      content: t("page-enterprise-cases-tmobile-content"),
+      name: "Sony",
+      content: (
+        <Translation
+          ns="page-enterprise"
+          id="page-enterprise-cases-sony-content"
+        />
+      ),
     },
     {
       name: "UN World Food Programme",
@@ -233,7 +237,6 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
       Logo: BancoSantander,
       className: "-translate-y-1",
     },
-    { name: "BASF", Logo: BASF, className: "text-[28px]" },
     { name: "BlackRock", Logo: BlackRock, className: "text-[32px]" },
     { name: "BMW", Logo: BMW, className: "scale-105 origin-bottom" },
     { name: "Coca-Cola", Logo: CocaCola },

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