チャットの検索結果に表示する能力バッジの見せ方の更新

[knokmki612]

    チャットの検索結果についての見せ方について、一点、検討しておきたいことがあるので issue を再オープンします。

検索結果にはこのように、先日お見せしたときに一度方針が決まったバッジタイトルのテキストだけでなく、バッジ画像、できたら発行元まで記載するコンポーネントを設計してみた提案です @horimasumi
またこのような見せ方が実現可能かもここで話せたらと思います。 @knokmki612

バッジの権威付け、という方針が主な動機です。

Originally posted by @Hidetaro7 in #58 (comment)

[knokmki612]

このような見せ方が実現可能か

任意のスタイルを付与したりReactコンポーネントを使用したりすることは可能なので、スクリーンショットで共有いただいたような内容には変更可能かと思います

chiloportal/frontend/components/Chat.tsx

Lines 126 to 151 in df52c28

	<p className="mb-4">
	「{textarea}」に関する能力バッジが{total_count}
	件見つかりました。
	</p>
	<ul className="pl-8 list-disc mb-4">
	{badgesList.slice(0, 3).map((badges) => (
	<li key={badges.badges_id}>
	<Link
	href={pagesPath.wisdom_badges
	._wisdomBadgesId(badges.badges_id)
	.$url()}
	className="underline text-primary-700"
	>
	{badges.name}
	</Link>
	</li>
	))}
	</ul>
	<p>
	<Link
	href={pagesPath.search.$url({ query: { q: textarea } })}
	className="text-primary-700"
	>
	…他{total_count}件の検索結果を確認する
	</Link>
	</p>