47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
export interface KeywordsDisplayProps {
|
|
keywords?: string[]
|
|
isLoading: boolean
|
|
}
|
|
|
|
export const KeywordsDisplay: React.FC<KeywordsDisplayProps> = ({ keywords, isLoading }) => {
|
|
if (!isLoading && (!keywords || keywords.length === 0)) {
|
|
return null
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<div
|
|
key={i}
|
|
data-testid="keyword-skeleton"
|
|
className="rounded-full px-3 py-1 bg-gray-200 animate-pulse w-16 h-6"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
|
|
<div data-testid="keywords-container" className="flex flex-wrap">
|
|
{keywords?.map((keyword, index) => (
|
|
<span
|
|
key={index}
|
|
role="listitem"
|
|
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 mr-2 mb-2"
|
|
>
|
|
{keyword}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|