TechnologyTags

Renders technology taxonomy terms with icons from /technologies/{term}.svg. Shows icon when available; otherwise text only. Shared by content pages and search filters.

Props

Prop	Type	Required	Default	Description
`terms`	`string[]`	Yes	-	Technology term UIDs (e.g. "react", "next")
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for visual editing in CMS
`className`	`string`	No	`''`	Additional CSS classes for container
`interactive`	`boolean`	No	`false`	Whether tags are clickable (link to search)
`getHref`	`(term: string) => string`	No	-	Callback to generate href when interactive

Usage

1import TechnologyTags from '@/components/molecules/TechnologyTags';
2
3// Basic display
4<TechnologyTags terms={['react', 'next']} />
5
6// Interactive with links to search
7<TechnologyTags
8  terms={technologyTerms}
9  interactive
10  getHref={(term) => `/search?technology=${encodeURIComponent(term)}`}
11/>

import TechnologyTags from '@/components/molecules/TechnologyTags';

// Basic display
<TechnologyTags terms={['react', 'next']} />

// Interactive with links to search
<TechnologyTags
  terms={technologyTerms}
  interactive
  getHref={(term) => `/search?technology=${encodeURIComponent(term)}`}
/>

Features

Technology icons: Uses SVG icons from public/technologies/ (angular, astro, next, nuxt, react, svelte, vue)
Tag design system: Uses tagVariants from atoms/Tag for consistent taxonomy tag styling
Fallback: Renders text only when icon unavailable
Interactive mode: Links to search or custom URLs when getHref provided
CSLP support: Pass cslp for Contentstack Live Preview editing

Notes

Icons sourced from lib/technologies.ts via getTechnologyIconSrc()
Used by ContentTaxonomies for technology terms on Blog, Guide, LiveStream, Kickstart
Used by CardTaxonomies for kickstart cards in List (DefaultCard, IconCard)
Technology filter in search sidebar uses same icons via FilterCheckbox iconSrc