fix: show template/module config header in AvatarData component

site/src/pages/TemplateBuilder/ModuleConfiguration.tsx

@@ -1,7 +1,7 @@
 import { TrashIcon } from "lucide-react";
 import { Button } from "#/components/Button/Button";
 import { CollapsibleSummary } from "#/components/CollapsibleSummary/CollapsibleSummary";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -30,37 +30,12 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="flex items-start gap-6 mb-6">
-				<div className="flex flex-1 items-center gap-3 min-w-0">
-					<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-						{iconUrl ? (
-							<img
-								src={iconUrl}
-								alt={`${name} icon`}
-								className="size-7 object-contain"
-							/>
-						) : (
-							<div className="size-7 rounded bg-surface-primary" />
-						)}
-					</figure>
-					<div>
-						<h3 className="text-md font-semibold text-content-primary my-0">
-							{name}
-						</h3>
-						<p className="text-sm font-normal text-content-secondary inline">
-							{description}
-						</p>
-						{detailsUrl && (
-							<Link
-								href={detailsUrl}
-								target="_blank"
-								size="sm"
-								className="text-xs font-normal ml-1"
-							>
-								View details
-							</Link>
-						)}
-					</div>
-				</div>
+				<TemplateBuilderAvatarData
+					name={name}
+					description={description}
+					iconUrl={iconUrl}
+					detailsUrl={detailsUrl}
+				/>
 				{onRemove && (
 					<Button
 						variant="outline"

site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx

@@ -0,0 +1,42 @@
+import type { FC, PropsWithChildren } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
+import { Link } from "#/components/Link/Link";
+
+type TemplateBuilderAvatarDataProps = PropsWithChildren<{
+	name: string;
+	description: string;
+	iconUrl?: string;
+	detailsUrl?: string;
+}>;
+
+export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
+	name,
+	description,
+	iconUrl,
+	detailsUrl,
+}) => {
+	return (
+		<AvatarData
+			avatar={<Avatar src={iconUrl} size="lg" />}
+			title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
+			subtitle={
+				<>
+					<p className="text-xs font-normal text-content-secondary inline">
+						{description}
+					</p>
+					{detailsUrl && (
+						<Link
+							href={detailsUrl}
+							target="_blank"
+							size="sm"
+							className="text-xs font-normal ml-1"
+						>
+							View details
+						</Link>
+					)}
+				</>
+			}
+		/>
+	);
+};

site/src/pages/TemplateBuilder/TemplateConfiguration.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -25,35 +25,12 @@ export const TemplateConfiguration: React.FC<TemplateConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="mb-6">
-				<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-					{iconUrl ? (
-						<img
-							src={iconUrl}
-							alt={`${name} icon`}
-							className="size-7 object-contain"
-						/>
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</figure>
-				<div>
-					<h3 className="mb-0 text-sm font-semibold text-content-primary">
-						{name}
-					</h3>
-					<p className="text-xs font-normal text-content-secondary inline">
-						{description}
-					</p>
-					{detailsUrl && (
-						<Link
-							href={detailsUrl}
-							target="_blank"
-							size="sm"
-							className="text-xs font-normal ml-1"
-						>
-							View details
-						</Link>
-					)}
-				</div>
+				<TemplateBuilderAvatarData
+					name={name}
+					description={description}
+					iconUrl={iconUrl}
+					detailsUrl={detailsUrl}
+				/>
 			</header>
 
 			{fields && fields.length > 0 && (