src/components/widget/Categories.astro

---
import ButtonLink from "@/components/common/ButtonLink.astro";
import WidgetLayout from "@/components/common/WidgetLayout.astro";
import { sidebarLayoutConfig } from "@/config";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { getCategoryList } from "@/utils/content-utils";

const categories = await getCategoryList();

const COLLAPSED_HEIGHT = "7.5rem";

// 从配置中获取分类组件的折叠阈值
const categoriesComponent = [
	...sidebarLayoutConfig.leftComponents,
	...sidebarLayoutConfig.rightComponents,
	...sidebarLayoutConfig.mobileBottomComponents,
].find((c) => c.type === "categories");

const collapseThreshold = categoriesComponent?.responsive?.collapseThreshold;
const isCollapsed = collapseThreshold
	? categories.length > collapseThreshold
	: false;

interface Props {
	class?: string;
	style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
---

<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}
                class={className} style={style}
>
    {categories.map((c) =>
        <ButtonLink
            url={c.url}
            badge={String(c.count)}
            label={`View all posts in the ${c.name.trim()} category`}
        >
            {c.name.trim()}
        </ButtonLink>
    )}
</WidgetLayout>