Merge pull request #93 from syfxlin/develop

style(header): Refactor index button

src/components/layouts/header/home.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React, { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { LinkButton } from "../../ui/button";
+import { resolve } from "../../../utils/vender";
+import { t } from "../../../locales";
+import * as styles from "./styles.css";
+
+export interface HomeProps {
+  home: ReactNode;
+  blog: ReactNode;
+}
+
+export const Home: React.FC<HomeProps> = ({ home, blog }) => {
+  const path = usePathname();
+  if (path !== "/") {
+    return (
+      <LinkButton tooltip aria-label={t("header.home")} href="/" className={styles.view_elastic}>
+        <span>{t("header.home")}</span>
+        {home}
+      </LinkButton>
+    );
+  } else {
+    return (
+      <LinkButton tooltip aria-label={t("header.blog")} href={resolve("page", 1)} className={styles.view_elastic}>
+        <span>{t("header.blog")}</span>
+        {blog}
+      </LinkButton>
+    );
+  }
+};

src/components/layouts/header/index.tsx

@@ -1,25 +1,20 @@
 import React from "react";
 import { cx } from "@syfxlin/reve";
 import { fetcher } from "../../../contents";
-import { Image } from "../../ui/image";
 import { LinkButton } from "../../ui/button";
 import { Iconify } from "../../ui/iconify";
-import { t } from "../../../locales";
 import { Rss } from "./rss";
+import { Home } from "./home";
 import { Theme } from "./theme";
 import { Search } from "./search";
-import { Blog } from "./blog";
 import * as styles from "./styles.css";
 
 export const Header: React.FC = async () => {
-  const [seo, header] = await Promise.all([fetcher.seo(), fetcher.header()]);
+  const header = await fetcher.header();
   return (
     <header className={styles.container}>
-      <LinkButton className={styles.left} aria-label={t("header.home")} href="/">
-        <Image className={styles.logo} src={seo.logo} alt={t("header.icon")} />
-      </LinkButton>
       <div className={styles.right}>
-        <Blog icon={<Iconify icon="ri:article-line" />} />
+        <Home home={<Iconify icon="ri:home-5-line" />} blog={<Iconify icon="ri:article-line" />} />
         {header.main.map(item => (
           <LinkButton
             tooltip

src/components/layouts/header/styles.css.ts

@@ -4,7 +4,7 @@ import { theme } from "../../../theme/theme.css";
 export const container = styled.css`
   height: 80px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;