refactor: code cleanup

src/components/control/BackToTop.astro

@@ -1,51 +1,50 @@
 ---
 import { Icon } from 'astro-icon/components';
-import Button from "./Button.astro";
 ---
 
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper hidden lg:block" transition:persist>
-    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
-        <Button name="Back to Top" card height="60px" width="60px">
+    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="backToTop()">
+        <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
-        </Button>
+        </button>
     </div>
 </div>
 
 <style lang="stylus">
 .back-to-top-wrapper
-    width: 60px
-    height: 60px
+    width: 3.75rem
+    height: 3.75rem
     position: absolute
     right: 0
     top: 0
 
 .back-to-top-btn
     color: var(--primary)
-    font-size: 36px
+    font-size: 2.25rem
     font-weight: bold
     border: none
     position: fixed
-    bottom: 240px
+    bottom: 15rem
     opacity: 1
     cursor: pointer
-    transform: translateX(80px)
+    transform: translateX(5rem)
     i
-        font-size: 28px
+        font-size: 1.75rem
     &.hide
-        transform: translateX(80px) scale(0.9)
+        transform: translateX(5rem) scale(0.9)
         opacity: 0
         pointer-events: none
     &:active
-      transform: translateX(80px) scale(0.9)
+      transform: translateX(5rem) scale(0.9)
 
 </style>
 
 <script is:raw>
-
-function topFunction() {
+function backToTop() {
     window.scroll({ top: 0, behavior: 'smooth' });
 }
+
 function scrollFunction() {
     let btn = document.getElementById('back-to-top-btn');
     if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
@@ -54,7 +53,5 @@ function scrollFunction() {
         btn.classList.add('hide')
     }
 }
-window.onscroll = function() {
-    scrollFunction();
-}
+window.onscroll = scrollFunction
 </script>

src/components/control/Button.astro

@@ -1,76 +0,0 @@
----
-interface Props {
-    id?: string;
-    name?: string;
-    isIcon?: boolean;
-    iconName?: string;
-    width?: string;
-    height?: string;
-    regular?: boolean;
-    light?: boolean
-    card?: boolean;
-    iconSize?: number,
-    class?: string
-    disabled?: boolean
-}
-const props = Astro.props;
-const {
-    id,
-    name,
-    isIcon = false,
-    iconName,
-    width,
-    height = '2.75rem',
-    regular,
-    light,
-    iconSize = 24,
-    card,
-    disabled = false,
-} = Astro.props;
-const className = Astro.props.class;
-import { Icon } from 'astro-icon/components';
----
-
-<button id={id}
-        disabled={disabled}
-        aria-label={name}
-    class:list={[
-    className,
-    `
-    transition
-    h-[var(--height)]
-    `,
-    {
-        'w-[var(--width)]': width,
-        'w-[var(--height)]': isIcon,
-
-        'bg-none': light,
-        'hover:bg-[var(--btn-plain-bg-hover)]': light,
-        'active:bg-[var(--btn-plain-bg-active)]': light,
-        'text-black/75': light,
-        'hover:text-[var(--primary)]': light,
-
-        'dark:text-white/75': light || regular,
-        'dark:hover:text-[var(--primary)]': light,
-
-        'bg-[var(--btn-regular-bg)]': regular,
-        'hover:bg-[var(--btn-regular-bg-hover)]': regular,
-        'active:bg-[var(--btn-regular-bg-active)]': regular,
-        'text-[var(--btn-content)]': regular,
-
-
-        'bg-[var(--card-bg)]': card,
-        'enabled:hover:bg-[var(--btn-card-bg-hover)]': card,
-        'enabled:active:bg-[var(--btn-card-bg-active)]': card,
-        'disabled:text-black/10': card,
-        'disabled:dark:text-white/10': card,
-    }
-]}
->
-    {props.isIcon && <Icon class="mx-auto" name={props.iconName} size={iconSize}></Icon> }
-    <slot />
-</button>
-
-<style define:vars={{ height, width, iconSize }}>
-
-</style>

src/components/control/ButtonTag.astro

@@ -1,5 +1,4 @@
 ---
-import Button from "./Button.astro";
 interface Props {
     size?: string;
     dot?: boolean;
@@ -8,9 +7,7 @@ interface Props {
 }
 const { size, dot, href, label }: Props = Astro.props;
 ---
-<a href={href} aria-label={label}>
-    <Button regular height="2rem" class="text-sm px-3 flex flex-row items-center rounded-lg">
-        {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
-        <slot></slot>
-    </Button>
+<a href={href} aria-label={label} class="btn-regular h-8 text-sm px-3 rounded-lg">
+    {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
+    <slot></slot>
 </a>

src/components/control/Pagination.astro

@@ -11,7 +11,6 @@ const {page} = Astro.props;
 const HIDDEN = -1;
 
 const className = Astro.props.class;
-import Button from "./Button.astro";
 
 const ADJ_DIST = 2;
 const VISIBLE = ADJ_DIST * 2 + 1;
@@ -51,13 +50,22 @@ if (r < page.lastPage)
 
 const parts: string[] = page.url.current.split('/');
 const commonUrl: string = parts.slice(0, -1).join('/') + '/';
+
+const getPageUrl = (p: number) => {
+    if (p == 1)
+        return commonUrl;
+    return commonUrl + p;
+}
+
 ---
 
 <div class:list={[className, "flex flex-row gap-3 justify-center"]}>
-    <a href={page.url.prev} aria-label={page.url.prev ? "Previous Page" : null}>
-        <Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
-                disabled = {page.url.prev == undefined}
-        ></Button>
+    <a href={page.url.prev} aria-label={page.url.prev ? "Previous Page" : null}
+       class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
+           {"disabled": page.url.prev == undefined}
+       ]}
+    >
+        <Icon name="material-symbols:chevron-left-rounded" size="1.75rem"></Icon>
     </a>
     <div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold">
         {pages.map((p) => {
@@ -69,16 +77,16 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
                 >
                     {p}
                 </div>
-            return <a href={commonUrl + p} aria-label=`Page ${p}`>
-                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="2.75rem" width="2.75rem">
-                    {p}
-                </Button>
-            </a>
+            return <a href={getPageUrl(p)} aria-label=`Page ${p}`
+                class="btn-card w-11 h-11 rounded-lg overflow-hidden active:scale-[0.85]"
+            >{p}</a>
         })}
     </div>
-    <a href={page.url.next} aria-label={page.url.next ? "Next Page" : null}>
-        <Button isIcon card name="Next Page" iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
-                disabled = {page.url.next == undefined}
-        ></Button>
+    <a href={page.url.next} aria-label={page.url.next ? "Next Page" : null}
+       class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
+           {"disabled": page.url.next == undefined}
+       ]}
+    >
+        <Icon name="material-symbols:chevron-right-rounded" size="1.75rem"></Icon>
     </a>
 </div>