feat: add support for icon in badge shortcode (#525)

* feat: add icon support to badge shortcodes

- Introduced an optional icon parameter to both badge.html files.
- Updated the badge rendering to include the icon alongside the content.
- Enhanced the layout for better alignment of icon and text.

* feat: add new feature shortcode

* docs: update badge doc
This commit is contained in:
Xin
2024-12-28 13:50:22 +00:00
committed by GitHub
parent 26a298da5d
commit 79bb4504a0
4 changed files with 22 additions and 5 deletions

View File

@ -2,6 +2,7 @@
{{- $type := .type -}}
{{- $class := .class | default "" -}}
{{- $border := .border | default false -}}
{{- $icon := .icon | default "" -}}
{{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}}
{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
@ -11,6 +12,9 @@
{{- $borderClass := cond (eq $border true) "hx-border" "" -}}
{{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
<div class="hextra-badge {{ $class }}">
<div class="hx-inline-flex hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
<div class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
{{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
{{- $content -}}
</div>
</div>
{{- /* Strip trailing newline. */ -}}