refactor: code cleanup

src/components/widget/Categories.astro

@@ -22,6 +22,12 @@ interface Props {
 
 <WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
     {categories.map((c) =>
-        <ButtonLink url={getCategoryUrl(c.name)} badge={c.count} label=`View all posts in the ${c.name} category`>{c.name}</ButtonLink>
+        <ButtonLink
+            url={getCategoryUrl(c.name)}
+            badge={c.count}
+            label=`View all posts in the ${c.name} category`
+        >
+            {c.name}
+        </ButtonLink>
     )}
 </WidgetLayout>

src/components/widget/NavMenuPanel.astro

@@ -8,9 +8,6 @@ interface Props {
 }
 
 const links = Astro.props.links;
-
-const enableBanner = siteConfig.banner.enable;
-
 ---
 <div id="nav-menu-panel" class:list={["float-panel closed absolute transition-all fixed right-4 px-2 py-2"]}>
     {links.map((link) => (

src/components/widget/Profile.astro

@@ -1,32 +1,29 @@
 ---
-import ImageBox from "../misc/ImageBox.astro";
-import Button from "../control/Button.astro";
+import ImageWrapper from "../misc/ImageWrapper.astro";
 import {Icon} from "astro-icon/components";
 import {profileConfig} from "../../config";
-interface props {
-
-}
-const className = Astro.props
 
 const config = profileConfig;
-
 ---
 <div class="card-base">
-    <a aria-label="Go to About Page" href="/about" class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3 max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
-        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
+    <a aria-label="Go to About Page" href="/about"
+       class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3
+       max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
+        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
+        w-full h-full z-50 flex items-center justify-center">
             <Icon name="fa6-regular:address-card"
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>
         </div>
-        <ImageBox src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageBox>
+        <ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
     </a>
     <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
     <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
     <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
     <div class="flex gap-2 mx-2 justify-center mb-4">
         {config.links.map(item =>
-            <a aria-label={item.name} href={item.url} target="_blank">
-                <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
+            <a aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
+                <Icon name={item.icon} size="1.5rem"></Icon>
             </a>
         )}
     </div>

src/components/widget/RecentPost.astro

@@ -1,20 +0,0 @@
----
-import WidgetLayout from "./WidgetLayout.astro";
-import ButtonLink from "../control/ButtonLink.astro";
-import {getSortedPosts} from "../../utils/content-utils";
-import {i18n} from "../../i18n/translation";
-import I18nKey from "../../i18n/i18nKey";
-import {getPostUrlBySlug} from "../../utils/url-utils";
-
-let posts = await getSortedPosts()
-
-const LIMIT = 3;
-
-posts = posts.slice(0, LIMIT)
-
----
-<WidgetLayout name={i18n(I18nKey.recentPosts)}>
-    {posts.map(post =>
-        <ButtonLink url={getPostUrlBySlug(post.slug)}>{post.data.title}</ButtonLink>
-    )}
-</WidgetLayout>

src/components/widget/SideBar.astro

@@ -1,6 +1,5 @@
 ---
 import Profile from "./Profile.astro";
-import RecentPost from "./RecentPost.astro";
 import Tag from "./Tags.astro";
 import Categories from "./Categories.astro";
 
@@ -12,10 +11,6 @@ const className = Astro.props.class;
     </div>
     <div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
         <Categories></Categories>
-        <!--<RecentPost></RecentPost>-->
         <Tag></Tag>
     </div>
 </div>
-
-<style>
-</style>

src/components/widget/WidgetLayout.astro

@@ -1,5 +1,4 @@
 ---
-import Button from "../control/Button.astro";
 import { Icon } from 'astro-icon/components';
 import {i18n} from "../../i18n/translation";
 import I18nKey from "../../i18n/i18nKey";
@@ -26,11 +25,11 @@ const {
         <slot></slot>
     </div>
     {isCollapsed && <div class="expand-btn px-4 -mb-2">
-        <Button light class=" w-full rounded-lg" height="36px">
+        <button class="btn-plain w-full h-9 rounded-lg">
             <div class="text-[var(--primary)] flex items-center justify-center gap-2 -translate-x-2">
                 <Icon name="material-symbols:more-horiz" size={28}></Icon> {i18n(I18nKey.more)}
             </div>
-        </Button>
+        </button>
     </div>}
 </widget-layout>