feat(site/blog): adjust style and add external links

site/blog/app/components/Bizk.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+
+const kits = [
+  {
+    name: "Components",
+    href: "http://bizk.qhan.wang/components",
+    icon: "i-ri:shapes-line",
+  },
+  {
+    name: "Hooks",
+    href: "http://bizk.qhan.wang/hooks",
+    icon: "i-ri:circle-line",
+  },
+  {
+    name: "utils",
+    href: "http://bizk.qhan.wang/utils",
+    icon: "i-ri:tools-line",
+  },
+  {
+    name: "Store",
+    href: "http://bizk.qhan.wang/store",
+    icon: "i-ri:store-line",
+  },
+  {
+    name: "Regexps",
+    href: "http://bizk.qhan.wang/regexps",
+    icon: "i-ri:magic-line",
+  },
+];
+
+export default function Bizk() {
+  return (
+    <div className="flex flex-wrap gap-3 mt-24">
+      {kits.map((c) => (
+        <Link
+          key={c.href}
+          className="opacity-50 hover:opacity-80 font-normal"
+          href={c.href}
+          title={c.name}
+          target="_blank"
+        >
+          <span className={`${c.icon} w-4 h-4 text-brand mr-1`} />
+          {c.name}
+        </Link>
+      ))}
+    </div>
+  );
+}

site/blog/app/components/Header.tsx

@@ -27,11 +27,13 @@ const nav = [
       />
     ),
   },
-  // {
-  //   name: "Life",
-  //   href: "/life",
-  //   icon: (props: any) => <Icon {...props} icon="heroicons-outline:photograph" />,
-  // },
+  {
+    name: "Bizk",
+    href: "http://bizk.qhan.wang/",
+    icon: (props: any) => (
+      <span {...props} className={clsx("i-ri:tools-line", props.className)} />
+    ),
+  },
   // { name: "Archives", href: "/archives", icon: ArchiveBoxIcon },
   // { name: "Statistics", href: "/statistics", icon: ChartBarSquareIcon },
 ];

site/blog/app/components/Social.tsx

@@ -12,7 +12,7 @@ const social = [
 
 export default function Social() {
   return (
-    <div className="flex flex-wrap gap-3 mt-24">
+    <div className="flex flex-wrap gap-3 mt-2">
       {social.map((c) => (
         <Link
           key={c.href}

site/blog/app/page.tsx

@@ -1,5 +1,6 @@
 import Footer from "@/app/components/Footer";
 import Social from "@/app/components/Social";
+import Bizk from "@/app/components/Bizk";
 
 // import AdmLink from "./Home/AdmLink";
 // import ProjWrapper from "./Home/ProjWrapper";
@@ -34,6 +35,7 @@ export default function Home() {
         </li>
       </ul>
 
+      <Bizk />
       <Social />
 
       <Footer className="mt-6 pt-6" />

site/blog/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.12",
+    "@iconify-json/ri": "^1.1.12",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",