add

apps/web/src/app/main/path/components/TermInfo.tsx

@@ -6,24 +6,30 @@ const TermInfo = ({ terms = [] }: { terms?: TermDto[] }) => {
 		<div>
 			{terms && terms?.length > 0 ? (
 				<div className="flex gap-2 mb-4">
-					{terms?.map((term: any) => {
+					{terms
-						return (
+						?.sort((a, b) =>
-							<Tag
+							String(a?.taxonomy?.id || "").localeCompare(
-								key={term.id}
+								String(b?.taxonomy?.id || "")
-								color={
+							)
-									term?.taxonomy?.slug ===
+						)
+						?.map((term: any) => {
+							return (
+								<Tag
+									key={term.id}
+									color={
+										term?.taxonomy?.slug ===
 										TaxonomySlug.CATEGORY
-										? "green"
+											? "green"
-										: term?.taxonomy?.slug ===
+											: term?.taxonomy?.slug ===
-											TaxonomySlug.LEVEL
+												  TaxonomySlug.LEVEL
-											? "blue"
+												? "blue"
-											: "orange"
+												: "orange"
-								}
+									}
-								className="px-3 py-1 rounded-full  border-0">
+									className="px-3 py-1 rounded-full  border-0">
-								{term.name}
+									{term.name}
-							</Tag>
+								</Tag>
-						);
+							);
-					})}
+						})}
 				</div>
 			) : (
 				<div className="flex gap-2 mb-4">