njump/details.templ

package main

import (
	"strconv"
)

templ detailsTemplate(params DetailsParams) {
	<div class="-ml-4 mb-6 h-1.5 w-1/3 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"></div>
	if params.Npub != "" {
		<div class="mb-6 break-all leading-5">
			<div class="text-sm text-strongpink">Author Public Key</div>
			<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.Npub }</span>
		</div>
	}
	if params.FileMetadata != nil {
		if params.FileMetadata.Summary != "" {
			<div class="mb-6 leading-5">
				<div class="text-sm text-strongpink">Summary</div>
				<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.FileMetadata.Summary }</span>
			</div>
		}
		if params.FileMetadata.Dim != "" {
			<div class="mb-6 leading-5">
				<div class="text-sm text-strongpink">Dimension</div>
				<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.FileMetadata.Dim }</span>
			</div>
		}
		if params.FileMetadata.Size != "" {
			<div class="mb-6 leading-5">
				<div class="text-sm text-strongpink">Size</div>
				<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.FileMetadata.Size } bytes</span>
			</div>
		}
		if params.FileMetadata.Magnet != "" {
			<div class="mb-6 leading-5">
				<div class="text-sm text-strongpink">Magnet URL</div>
				<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.FileMetadata.Magnet }</span>
			</div>
		}
	}
	if len(params.SeenOn) != 0 {
		<div class="mb-6 leading-5 text-neutral-500 dark:text-neutral-300 text-[16px]">
			<div class="text-sm text-strongpink">Seen on</div>
			for _, v := range params.SeenOn {
				<a
					href={ templ.URL("/r/" + v) }
					class="underline-none pr-2 decoration-neutral-200 decoration-1 underline-offset-[6px] hover:underline"
				>{ v }</a>
			}
		</div>
	}
	<!-- details hidden behind a toggle -->
	if params.HideDetails {
		<div class="mb-6 flex items-center print:hidden">
			<input
				type="checkbox"
				id="advanced-switch"
				class="hidden"
				_="on load make a URLSearchParams from location.search then get it.get('details') then if it is 'yes' set my.checked to true then trigger switch on me end
				   on change or switch log my checked then if my checked is true
				     remove .hidden from #hidden-fields
				     tell the next <label /> from me
				       add .bg-strongpink .after:translate-x-full
				       remove .bg-gray-300 .dark:bg-zinc-800
				     end
				   otherwise
				     add .hidden to #hidden-fields
				     tell the next <label /> from me
				       remove .bg-strongpink .after:translate-x-full
				       add .bg-gray-300 .dark:bg-zinc-800
				     end
				   end
				"
			/>
			<label
				for="advanced-switch"
				class="cursor-pointer leading-4 underline text-neutral-500 dark:text-neutral-300 text-[16px] decoration-neutral-200 dark:decoration-neutral-500 decoration-1 underline-offset-[6px]"
			>Show more details</label>
		</div>
	}
	<div id="hidden-fields" class={ templ.KV("hidden", params.HideDetails) }>
		<div class="mb-6 leading-5">
			<div class="text-sm text-strongpink">Published at</div>
			<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.CreatedAt }</span>
		</div>
		<div class="mb-6 leading-5">
			<div class="text-sm text-strongpink">Kind type</div>
			<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ strconv.Itoa(params.Kind) }</span>
			if params.KindNIP != "" {
				<a
					href={ templ.URL("https://github.com/nostr-protocol/nips/blob/master/" + params.KindNIP + ".md") }
					class="underline decoration-neutral-200 dark:decoration-neutral-500 decoration-1 underline-offset-[6px] text-neutral-500 dark:text-neutral-300 text-[16px]"
				>{ params.KindDescription }</a>
			}
		</div>
		if params.Nevent != "" {
			<div class="mb-6 leading-5">
				<div class="text-sm text-strongpink">Address Code</div>
				<span class="text-[16px] text-neutral-500 dark:text-neutral-300">{ params.Nevent }</span>
			</div>
		}
		<div class="-mx-4 my-8 bg-neutral-100 px-4 pb-4 leading-5 dark:bg-neutral-700">
			<div
				class="-mx-4 bg-neutral-300 px-4 py-1 text-neutral-100 dark:bg-neutral-800 dark:text-neutral-400"
			>
				Event JSON
			</div>
			<div class="mt-4 whitespace-pre-wrap break-all font-mono text-sm">
				@templ.Raw(params.EventJSON)
			</div>
		</div>
		if params.Nprofile != "" {
			<div class="mb-6 break-all leading-5">
				<div class="text-sm text-strongpink">Author Profile Code</div>
				<span class="text-neutral-500 dark:text-neutral-300 text-[16px]">{ params.Nprofile }</span>
			</div>
		}
	</div>
}