+
+
+
+
diff --git a/src/components/IotHub/CategoryTilesGrid.astro b/src/components/IotHub/CategoryTilesGrid.astro
new file mode 100644
index 0000000000..0b4f27b0c9
--- /dev/null
+++ b/src/components/IotHub/CategoryTilesGrid.astro
@@ -0,0 +1,70 @@
+---
+import { IOT_HUB_CATEGORIES } from '@models/iot-hub';
+import CategoryTile from './CategoryTile.astro';
+---
+
+
+ {
+ IOT_HUB_CATEGORIES.map((cat) => (
+
+
+
+
+
+
+
+
+ Contribute
+ Become a Creator
++ Submit your templates to the ThingsBoard IoT Hub to get featured and showcase your + solutions to our global community. +
+
+
+
+
+
+
+
+ {bio && {name}
+ {verified && ( + + verified + + )} +{bio}
} +
+ {website && (
+
+
+
+
+ )
+}
+
+
+
+
diff --git a/src/components/IotHub/DetailHero.astro b/src/components/IotHub/DetailHero.astro
new file mode 100644
index 0000000000..abbe6e2ce4
--- /dev/null
+++ b/src/components/IotHub/DetailHero.astro
@@ -0,0 +1,552 @@
+---
+import {
+ IOT_HUB_CATEGORIES,
+ formatInstalls,
+ getCardVariant,
+ getPlaceholderIcon,
+ getTbVersionLabel,
+ resolveImage,
+ type ListingDetail,
+} from '@models/iot-hub';
+import InstallButton from './InstallButton.astro';
+import IotHubBreadcrumbs from './IotHubBreadcrumbs.astro';
+import IotHubIcon from './IotHubIcon.astro';
+import DetailGallery from './DetailGallery.astro';
+import IotHubMarkdown from '@components/IotHub/IotHubMarkdown.astro';
+
+interface Props {
+ detail: ListingDetail;
+ categorySlug: string;
+}
+
+const { detail, categorySlug } = Astro.props;
+
+// Use `tileLabel` (same source as CategoryHero's breadcrumb) so the parent
+// crumb on the detail page matches what users see one level up — e.g.
+// "Device Library" rather than the API's plural "Devices".
+const categoryLabel =
+ IOT_HUB_CATEGORIES.find((c) => c.slug === categorySlug)?.tileLabel ??
+ categorySlug;
+const isCompact = getCardVariant(detail.itemType) === 'small';
+
+// SOLUTION_TEMPLATE listings ship multiple screenshots — render the gallery
+// in the preview slot instead of a single image (DEVICE / WIDGET fall back
+// to `detail.image`).
+const showGallery =
+ !isCompact &&
+ detail.itemType === 'SOLUTION_TEMPLATE' &&
+ detail.screenshots.length > 0;
+const heroImg = !isCompact && !showGallery ? resolveImage(detail.image) : null;
+// Compact variants render a colored icon tile next to the title (same as
+// the compact ListingCard renderer, but at 80x80 to match the design).
+// IotHubIcon handles the `mdi:`-prefix branching internally.
+const tileColor = detail.color ?? '#4caf50';
+const placeholderIcon = isCompact ? getPlaceholderIcon(detail) : null;
+
+// Sub-title meta row — name for the listing's item type (not the subtype;
+// hardwareType / widgetType / cfType / ruleChainType already surface in the
+// Type chip in DetailMeta below).
+const subTypeLabel = (() => {
+ switch (detail.itemType) {
+ case 'DEVICE':
+ return 'Device';
+ case 'WIDGET':
+ return 'Widget';
+ case 'SOLUTION_TEMPLATE':
+ return 'Solution Template';
+ case 'CALCULATED_FIELD':
+ return 'Calculated Field';
+ case 'ALARM_RULE':
+ return 'Alarm Rule';
+ case 'RULE_CHAIN':
+ return 'Rule Chain';
+ default:
+ return String(detail.itemType)
+ .toLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, (c) => c.toUpperCase());
+ }
+})();
+
+const subTypeIcon = (() => {
+ switch (detail.itemType) {
+ case 'DEVICE':
+ return 'memory';
+ case 'WIDGET':
+ return 'widgets';
+ case 'SOLUTION_TEMPLATE':
+ return 'integration_instructions';
+ case 'CALCULATED_FIELD':
+ return 'functions';
+ case 'ALARM_RULE':
+ return 'notification_important';
+ case 'RULE_CHAIN':
+ return 'account_tree';
+ default:
+ return 'category';
+ }
+})();
+
+const publishedDate =
+ detail.publishedTime != null
+ ? new Date(detail.publishedTime).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ })
+ : null;
+
+// Display version label — prepend `v` when the API string doesn't already
+// carry one (handles both `1.0.0` and `v1.0.0`).
+const versionLabel = detail.version
+ ? detail.version.startsWith('v')
+ ? detail.version
+ : `v${detail.version}`
+ : null;
+
+// License is always shown last per the design sub-title row;
+// listings on the IoT Hub are published under Apache-2.0.
+const licenseLabel = 'Apache-2.0 license';
+
+// Supported ThingsBoard version envelope (aggregated across variants in
+// MpListingDetail.findDetailById) — empty when min is unknown.
+const tbVersionLabel = getTbVersionLabel(detail.minTbVersion, detail.maxTbVersion);
+---
+
+
+
+ {screenshots.length > 1 && (
+ -
+ {screenshots.map((s, i) => (
+
-
+
+
+ ))}
+
+
+
+ )}
+
+ {screenshots.map((_, i) => (
+
+ ))}
+
+
+
+
+ ) : (
+ <>
+
+
+
+ {detail.description && (
+
+
+ {detail.name}
+ +
+
+ )}
+
+
+ {detail.name}
+ +
+
+
+ )
+ }
+
+ {showGallery ? (
+ 
+ ) : (
+
+ )}
+
+
+ {detail.description && (
+
+
+
+ )}
+
+
+
+
+
+
+
+ )}
+ {secondColumn && (
+
+ )}
+ {thirdColumn && (
+
+ )}
+ {useCasesColumn && (
+
+ )}
+ -
+ {nodes.map((node) => (
+
- + {node.name} + + ))} +