replaced remaining details elements with accordion component

templates/components/accounts/{acctID.int64}/platforms/{platform}/shops/link-section.html.tmpl

@@ -10,7 +10,7 @@
 	{{- $idPrefix := "mock-" }}
 	<div
 		name={{$platform}}
-		class="flex flex-col items-center"
+		class="flex flex-col items-center text-center"
 	>
 	{{- $shops := .Accounts.ListMockShopsForPlatform $acctID $parsedPlatform }}
 	{{- if $shops }}

templates/components/accounts/{acctID.int64}/platforms/{platform}/shops/list-item.html.tmpl

@@ -51,59 +51,27 @@
 			end
 	"
 >
-	<details
-		id="{{$idPrefix}}{{$platformSegment}}-details"
-		class="
-			group
 
-			{{/* TODO: make custom class for all this */}}
-			details-content:opacity-[0]
-			open:details-content:opacity-[1]
-
-			details-content:transform-[translate(0px,-2em)]
-			open:details-content:transform-[translate(0px,0px)]
-
-			details-content:border-transparent
-			open:details-content:border-dotted
-			open:details-content:border-x-[0px]
-			open:details-content:border-x-transparent
-			open:details-content:border-b-[0px]
-			open:details-content:border-b-transparent
-			open:details-content:border-t-background
-			open:details-content:border-t-[0.25rem]
-			details-content:outline-transparent
-
-			details-content:transition-[opacity_transform]
-		"
-		hx-preserve
-	>
-		<summary
-			class="
-				list-none
-				p-[1em]
-				after:content-['+']
-				group-open:after:content-['-']
-				after:float-right
-				after:font-bold
-				after:text-[2em]
-				after:leading-[1em]
-				cursor-pointer
-			"
-		>
-			{{/*
-			group-open:border-b-background
-			group-open:border-b-[0.25rem]
-			border-dotted
-			*/}}
-			<h3 class="inline-block">{{$platform.PrettyPrint}}</h3>
-		</summary>
-
-		<div
-			id="{{$idPrefix}}{{$platform}}-tab"
-			class="p-[1em] text-center"
-		>
+	{{ define "accordion-header" }}
+		{{/* .Platform */}}
+		{{- $platform := .Platform -}}
+		<h3 class="inline-block">{{$platform.PrettyPrint}}</h3>
+	{{ end }}
+	{{ define "accordion-body" }}
+		{{/* .Platform, .IDPrefix */}}
+		{{- $acctID := .Identity.Account.AccountID }}
+		{{- $platform := .Platform -}}
+		{{- $idPrefix := .IDPrefix }}
+		<div id="{{$idPrefix}}{{$platform}}-tab">
 			{{- $pathSegment := lowerSnakeCase (printf "%s" $platform) }}
 			{{- component (printf "/accounts/%d/platforms/%s/shops/link-section" $acctID $pathSegment) "Mock" .Mock  }}
 		</div>
-	</details>
+	{{ end }}
+	{{ component "accordion"
+		"Platform" $platform
+		"IDPrefix" $idPrefix
+		"ID" (printf "%s%s-details" $idPrefix $platformSegment)
+		"#accordion-header" "accordion-header"
+		"#accordion-body" "accordion-body"
+	}}
 </li>