feat: head follow button style

public/locales/zh/site.json

@@ -8,5 +8,6 @@
   "Write a comment on the blockchain": "在区块链上写下你的评论",
   "powered by": "由 <name/> 提供支持",
   "This address is in local editing preview mode and cannot be viewed by the public. The expected online address is:":
-    "此地址处于本地编辑预览模式，无法被公众查看。预期的在线地址是："
+    "此地址处于本地编辑预览模式，无法被公众查看。预期的在线地址是：",
+  "Support": "支持"
 }

src/components/common/FollowingButton.tsx

@@ -63,7 +63,7 @@ export const FollowingButton: React.FC<{
 
   return (
     <Button
-      variant={variant}
+      variant={subscription.data ? "outline" : variant}
       onClick={handleClickSubscribe}
       className={cn(className, "align-middle space-x-1 group")}
       isLoading={
@@ -76,7 +76,7 @@ export const FollowingButton: React.FC<{
       }
       size={size}
       aria-label="follow"
-      variantColor={subscription.data ? "gray" : undefined}
+      outlineColor="gray"
       isAutoWidth
     >
       <span className="i-bxs:bell"></span>

src/components/site/SiteHeader.tsx

@@ -19,6 +19,7 @@ import { useState, useRef, useEffect, RefObject } from "react"
 import chroma from "chroma-js"
 import { Menu } from "~/components/ui/Menu"
 import { useTranslation } from "next-i18next"
+import { HeartIcon } from "@heroicons/react/24/solid"
 
 type HeaderLinkType = {
   icon?: React.ReactNode
@@ -53,6 +54,7 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
 export const SiteHeader: React.FC<{
   site?: Profile | undefined | null
 }> = ({ site }) => {
+  const { t } = useTranslation("site")
   const leftLinks: HeaderLinkType[] = site?.navigation?.find(
     (nav) => nav.url === "/",
   )
@@ -248,7 +250,7 @@ export const SiteHeader: React.FC<{
                       return (
                         <Button
                           variant="text"
-                          aria-label="more"
+                          aria-label={item.text}
                           key={item.text}
                           className="-mx-2"
                           onClick={() => window.open(item.url, "_blank")}
@@ -262,6 +264,16 @@ export const SiteHeader: React.FC<{
                       return null
                     }
                   })}
+                  {/* <Button
+                    variant="text"
+                    aria-label={"Support"}
+                    key={t("Support")}
+                    className="-mx-2"
+                  >
+                    <span className="text-red-400 flex w-6 h-6">
+                      <HeartIcon />
+                    </span>
+                  </Button> */}
                   <FollowingButton site={site} />
                 </div>
               </div>
@@ -278,7 +290,7 @@ export const SiteHeader: React.FC<{
           </div>
         </div>
         <div className="text-gray-500 flex items-center justify-between w-full mt-auto">
-          <div className="xlog-site-navigation flex items-center space-x-5 min-w-0 overflow-x-auto font-medium">
+          <div className="xlog-site-navigation flex items-center space-x-5 min-w-0 overflow-x-auto">
             {leftLinks.map((link, i) => {
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}

src/components/ui/Button.tsx

@@ -25,6 +25,7 @@ type ButtonProps = {
   isAutoWidth?: boolean
   variant?: Variant
   variantColor?: VariantColor
+  outlineColor?: VariantColor
   size?: "sm" | "xl" | "2xl"
   rounded?: "full" | "lg"
 }
@@ -42,6 +43,7 @@ export const Button = React.forwardRef<
     isBlock,
     variant,
     variantColor,
+    outlineColor,
     size,
     rounded,
     isAutoWidth,
@@ -61,6 +63,7 @@ export const Button = React.forwardRef<
         isLoading && "is-loading",
         isBlock && `is-block`,
         variantColor && `is-${variantColor}`,
+        variant === "outline" && outlineColor && `is-outline-${outlineColor}`,
         isDisabled && `is-disabled`,
         isAutoWidth && `is-auto-width`,
         size && `is-${size}`,

src/css/tailwind.css

@@ -171,6 +171,11 @@ a {
   @apply bg-gray-400 hover:bg-gray-500 focus:bg-gray-500;
 }
 
+.button.is-outline-gray {
+  @apply text-gray-500 hover:text-gray-600 focus:text-gray-600;
+  @apply border-gray-400 hover:border-gray-500 focus:border-gray-500;
+}
+
 .button.is-gradient {
   @apply hover:bg-gradient-to-br from-[#FF4D4D] to-[#F9CB28];
   @apply hover:text-white;