💄 Turn the admin link into an orange Edit button with the Tina llama

src/app/docs-layout.tsx

@@ -1,5 +1,4 @@
 import "@/styles/global.css";
-import AdminLink from "@/components/ui/admin-link";
 import { TailwindIndicator } from "@/components/ui/tailwind-indicator";
 import { ThemeSelector } from "@/components/ui/theme-selector";
 import settings from "@/content/settings/config.json";
@@ -70,7 +69,6 @@ export function DocsLayout({
 
 const Content = ({ children }: { children?: React.ReactNode }) => (
   <>
-    <AdminLink />
     <TailwindIndicator />
     <div className="font-sans flex min-h-screen flex-col bg-background-color">
       <div className="flex flex-1 flex-col items-center">{children}</div>

src/components/docs/layout/top-nav.tsx

@@ -2,6 +2,7 @@ import { MobileNavSidebar } from "@/components/navigation/mobile-navigation-side
 import * as Tabs from "@radix-ui/react-tabs";
 import type React from "react";
 import { Search } from "../../search-docs/search";
+import AdminLink from "../../ui/admin-link";
 import LightDarkSwitch from "../../ui/light-dark-switch";
 import { CtaButton } from "./cta-button";
 import { LanguageSwitcher } from "./language-switcher";
@@ -51,6 +52,7 @@ export const TopNav = ({
           <div className="w-full hidden lg:flex justify-end">
             <LightDarkSwitch />
           </div>
+          <AdminLink />
         </div>
       </div>
     </div>

src/components/icons/tina-icon.tsx

@@ -0,0 +1,13 @@
+export const TinaIcon = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 49 68"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Tina llama"
+    className={className}
+  >
+    <path d="M31.4615 30.1782C34.763 27.4475 36.2259 11.3098 37.6551 5.50906C39.0843 -0.291715 44.995 0.00249541 44.995 0.00249541C44.995 0.00249541 43.4605 2.67299 44.0864 4.66584C44.7123 6.65869 49 8.44005 49 8.44005L48.0752 10.8781C48.0752 10.8781 46.1441 10.631 44.995 12.9297C43.8459 15.2283 45.7336 37.9882 45.7336 37.9882C45.7336 37.9882 38.8271 51.6106 38.8271 57.3621C38.8271 63.1136 41.5495 67.9338 41.5495 67.9338H37.7293C37.7293 67.9338 32.1252 61.2648 30.9759 57.9318C29.8266 54.5988 30.2861 51.2658 30.2861 51.2658C30.2861 51.2658 24.1946 50.921 18.7931 51.2658C13.3915 51.6106 9.78922 56.2539 9.13908 58.8512C8.48894 61.4486 8.21963 67.9338 8.21963 67.9338H5.19906C3.36057 62.2603 1.90043 60.2269 2.69255 57.3621C4.88665 49.4269 4.45567 44.9263 3.94765 42.9217C3.43964 40.9172 0 39.1676 0 39.1676C1.68492 35.7349 3.4048 34.0854 10.8029 33.9133C18.201 33.7413 28.1599 32.9088 31.4615 30.1782Z" />
+    <path d="M12.25 57.03C12.25 57.03 13.0305 64.2533 17.1773 67.9342H20.7309C17.1773 63.9085 16.7897 53.415 16.7897 53.415C14.9822 54.0035 12.4799 56.1106 12.25 57.03Z" />
+  </svg>
+);

src/components/ui/admin-link.tsx

@@ -1,46 +1,43 @@
 "use client";
 
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import React from "react";
-import { useEffect } from "react";
+import { TinaIcon } from "@/components/icons/tina-icon";
+import { useEffect, useState } from "react";
 import { useEditState } from "tinacms/dist/react";
 
+const hasTinaSession = () => {
+  const raw = window.localStorage.getItem("tinacms-auth");
+  if (!raw) return false;
+  try {
+    const auth: unknown = JSON.parse(raw);
+    return (
+      typeof auth === "object" &&
+      auth !== null &&
+      "access_token" in auth &&
+      Boolean(auth.access_token)
+    );
+  } catch {
+    return false;
+  }
+};
+
 const AdminLink = () => {
   const { edit } = useEditState();
-  const [showAdminLink, setShowAdminLink] = React.useState(false);
+  const [showAdminLink, setShowAdminLink] = useState(false);
 
   useEffect(() => {
-    setShowAdminLink(
-      !edit &&
-        JSON.parse((window.localStorage.getItem("tinacms-auth") as any) || "{}")
-          ?.access_token
-    );
+    setShowAdminLink(!edit && hasTinaSession());
   }, [edit]);
 
-  const handleDismiss = () => {
-    setShowAdminLink(false);
-  };
+  if (!showAdminLink) return null;
 
   return (
-    <>
-      {showAdminLink && (
-        <div className="fixed right-4 top-4 z-50 flex items-center justify-between rounded-full bg-blue-500 px-3 py-1 text-white">
-          <a
-            href={`/admin/index.html#/~${window.location.pathname}`}
-            className="text-xs"
-          >
-            Edit This Page
-          </a>
-          <button
-            type="button"
-            onClick={handleDismiss}
-            className="ml-2 text-sm"
-          >
-            <XMarkIcon className="size-4" />
-          </button>
-        </div>
-      )}
-    </>
+    <a
+      href={`/admin/index.html#/~${window.location.pathname}`}
+      className="flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-[#EC4815] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#D13F13]"
+    >
+      <TinaIcon className="h-5 w-auto" />
+      Edit ✏️
+    </a>
   );
 };