Revert "Migrate to HeroUI v3 and Tailwind CSS v4"

This reverts commit 6a9296f33d.

components/right-sidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Link from 'next/link';
 import Image from 'next/image';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
@@ -8,7 +6,6 @@ import { siteConfig } from '@/lib/config';
 import { getAllTagsWithCount } from '@/lib/posts';
 import { allPages } from 'contentlayer2/generated';
 import { MastodonFeed } from './mastodon-feed';
-import { Card, Avatar, Chip } from '@heroui/react';
 
 export function RightSidebar() {
   const tags = getAllTagsWithCount().slice(0, 5);
@@ -38,41 +35,38 @@ export function RightSidebar() {
       icon: FaLinkedin,
       label: 'LinkedIn'
     }
-  ].filter(Boolean) as { key: string; href: string; icon: React.ComponentType<{ className?: string }>; label: string }[];
+  ].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];
 
   return (
     <aside className="hidden lg:block">
       <div className="sticky top-20 flex flex-col gap-4">
-        <Card className="motion-card group relative overflow-hidden rounded-xl border px-4 py-4 dark:border-slate-800">
+        <section className="motion-card group relative overflow-hidden rounded-xl border bg-white px-4 py-4 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
           <div className="pointer-events-none absolute -left-10 -top-10 h-24 w-24 rounded-full bg-sky-300/35 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-sky-500/25" />
           <div className="pointer-events-none absolute -bottom-12 right-[-2.5rem] h-28 w-28 rounded-full bg-indigo-300/30 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-indigo-500/20" />
 
-          <Card.Content className="relative flex flex-col items-center p-0">
+          <div className="relative flex flex-col items-center">
             <Link
               href={aboutPage?.url || '/pages/關於作者'}
               aria-label="關於作者"
               className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5"
             >
-              <Avatar className="h-24 w-24 border border-slate-200 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700">
-                {avatarSrc ? (
-                  <Avatar.Image asChild>
-                    <Image
-                      src={avatarSrc}
-                      alt={siteConfig.name}
-                      width={96}
-                      height={96}
-                      unoptimized
-                      className="h-full w-full object-cover"
-                    />
-                  </Avatar.Image>
-                ) : null}
-                <Avatar.Fallback className="text-lg font-semibold">
+              {avatarSrc ? (
+                <Image
+                  src={avatarSrc}
+                  alt={siteConfig.name}
+                  width={96}
+                  height={96}
+                  unoptimized
+                  className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700"
+                />
+              ) : (
+                <div className="flex h-24 w-24 items-center justify-center rounded-full bg-slate-900 text-lg font-semibold text-slate-50 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:bg-slate-100 dark:text-slate-900">
                   {siteConfig.name.charAt(0).toUpperCase()}
-                </Avatar.Fallback>
-              </Avatar>
+                </div>
+              )}
             </Link>
             {socialItems.length > 0 && (
-              <div className="mt-2 flex items-center gap-3 text-lg text-[var(--color-accent-text-light)] dark:text-[var(--color-accent-text-dark)]">
+              <div className="mt-2 flex items-center gap-3 text-lg text-accent-textLight dark:text-accent-textDark">
                 {socialItems.map((item) => (
                   <a
                     key={item.key}
@@ -80,7 +74,7 @@ export function RightSidebar() {
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={item.label}
-                    className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-accent)] dark:bg-slate-800 dark:text-slate-200"
+                    className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent dark:bg-slate-800 dark:text-slate-200"
                   >
                     <item.icon className="h-4 w-4" />
                   </a>
@@ -94,55 +88,48 @@ export function RightSidebar() {
                 ))}
               </div>
             )}
-          </Card.Content>
-        </Card>
+          </div>
+        </section>
 
         {/* Mastodon Feed */}
         <MastodonFeed />
 
         {tags.length > 0 && (
-          <Card className="motion-card rounded-xl border px-4 py-3 dark:border-slate-800">
-            <Card.Header className="p-0">
-              <Card.Title className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
-                <FiTrendingUp className="h-3 w-3 text-orange-400" />
-                熱門標籤
-              </Card.Title>
-            </Card.Header>
-            <Card.Content className="p-0">
-              <div className="mt-2 flex flex-wrap gap-2 text-base">
-                {tags.map(({ tag, slug, count }) => {
-                  let fontWeight = 'font-normal';
-                  if (count >= 5) fontWeight = 'font-semibold';
-                  else if (count >= 3) fontWeight = 'font-medium';
+          <section className="motion-card rounded-xl border bg-white px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
+            <h2 className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
+              <FiTrendingUp className="h-3 w-3 text-orange-400" />
+              熱門標籤
+            </h2>
+            <div className="mt-2 flex flex-wrap gap-2 text-base">
+              {tags.map(({ tag, slug, count }) => {
+                let sizeClass = '';
+                if (count >= 5) sizeClass = 'font-semibold';
+                else if (count >= 3) sizeClass = 'font-medium';
 
-                  return (
-                    <Link key={tag} href={`/tags/${slug}`}>
-                      <Chip
-                        color="accent"
-                        variant="soft"
-                        size="sm"
-                        className={`${fontWeight} tag-chip cursor-pointer rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-[var(--color-accent-text-light)] transition hover:bg-[var(--color-accent)] hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
-                      >
-                        {tag}
-                      </Chip>
-                    </Link>
-                  );
-                })}
-              </div>
-            </Card.Content>
-            <Card.Footer className="mt-3 flex items-center justify-between p-0 type-small text-slate-500 dark:text-slate-400">
+                return (
+                  <Link
+                    key={tag}
+                    href={`/tags/${slug}`}
+                    className={`${sizeClass} tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
+                  >
+                    {tag}
+                  </Link>
+                );
+              })}
+            </div>
+            <div className="mt-3 flex items-center justify-between type-small text-slate-500 dark:text-slate-400">
               <span className="inline-flex items-center gap-1">
                 <FiArrowRight className="h-3 w-3" />
                 一覽所有標籤
               </span>
               <Link
                 href="/tags"
-                className="motion-link text-[var(--color-accent-text-light)] hover:text-[var(--color-accent)] dark:text-[var(--color-accent-text-dark)]"
+                className="motion-link text-accent-textLight hover:text-accent dark:text-accent-textDark"
               >
                 前往
               </Link>
-            </Card.Footer>
-          </Card>
+            </div>
+          </section>
         )}
       </div>
     </aside>