2023-08-13 22:18:20 +01:00
|
|
|
{{- $class := .Attributes.class | default "" -}}
|
|
|
|
{{- $filename := .Attributes.filename | default "" -}}
|
|
|
|
{{- $lang := .Attributes.lang | default .Type -}}
|
2023-11-11 20:14:39 -05:00
|
|
|
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
|
2023-07-30 22:18:28 +01:00
|
|
|
|
|
|
|
|
2024-03-18 18:37:47 +00:00
|
|
|
<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
|
2023-07-30 22:18:28 +01:00
|
|
|
{{- if $filename -}}
|
2024-03-05 11:17:29 +03:30
|
|
|
<div class="filename" dir="auto">{{ $filename }}</div>
|
2023-07-30 22:18:28 +01:00
|
|
|
{{- end -}}
|
|
|
|
{{- if transform.CanHighlight $lang -}}
|
2023-11-11 20:14:39 -05:00
|
|
|
<div>{{- highlight .Inner $lang .Options -}}</div>
|
2023-07-30 22:18:28 +01:00
|
|
|
{{- else -}}
|
2023-11-11 20:14:39 -05:00
|
|
|
<pre><code>{{ .Inner }}</code></pre>
|
2023-07-30 22:18:28 +01:00
|
|
|
{{- end -}}
|
2024-02-20 17:59:31 -05:00
|
|
|
<div class="hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
|
2023-10-07 20:01:19 +01:00
|
|
|
<button
|
2024-03-18 18:37:47 +00:00
|
|
|
class="code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
|
2023-11-11 20:14:39 -05:00
|
|
|
title="{{ $copyCode }}"
|
2023-10-07 20:01:19 +01:00
|
|
|
>
|
2024-02-20 17:59:31 -05:00
|
|
|
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
|
|
|
|
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
|
2023-07-30 22:18:28 +01:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|