Diego-C-05
111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
type TrackedKeywordsProps = {
|
|
keywords: string[]
|
|
keywordInput: string
|
|
onKeywordInputChange: (value: string) => void
|
|
onAddKeyword: (keyword: string) => void
|
|
onRemoveKeyword: (keyword: string) => void
|
|
onSaveKeywords: () => void
|
|
}
|
|
|
|
const keywordSuggestions = ['OpenAI', 'Google AI', 'Anthropic', 'Tesla', 'SpaceX']
|
|
|
|
// Sezione keyword: permette di aggiungere, rimuovere e salvare le entità monitorate.
|
|
function TrackedKeywords({
|
|
keywords,
|
|
keywordInput,
|
|
onKeywordInputChange,
|
|
onAddKeyword,
|
|
onRemoveKeyword,
|
|
onSaveKeywords,
|
|
}: TrackedKeywordsProps) {
|
|
const handleSubmit = () => {
|
|
onAddKeyword(keywordInput)
|
|
}
|
|
|
|
return (
|
|
<section className="settings-card" aria-label="Parole chiave monitorate">
|
|
<header className="settings-section-header">
|
|
<div>
|
|
<h2>Parole chiave monitorate</h2>
|
|
<p>Monitora aziende, persone e temi con un tracciamento rapido.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="keyword-toolbar">
|
|
<input
|
|
type="text"
|
|
className="settings-keyword-input"
|
|
placeholder="Aggiungi parola chiave..."
|
|
value={keywordInput}
|
|
onChange={(event) => onKeywordInputChange(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
handleSubmit()
|
|
}
|
|
}}
|
|
/>
|
|
<button type="button" className="keyword-add-button" onClick={handleSubmit}>
|
|
<PlusIcon />
|
|
Aggiungi
|
|
</button>
|
|
</div>
|
|
|
|
<div className="suggestion-row" aria-label="Suggerimenti parole chiave">
|
|
{keywordSuggestions.map((suggestion) => (
|
|
<button
|
|
key={suggestion}
|
|
type="button"
|
|
className="suggestion-chip"
|
|
onClick={() => onAddKeyword(suggestion)}
|
|
>
|
|
<span aria-hidden="true">+</span>
|
|
{suggestion}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{keywords.length > 0 && (
|
|
<div className="tracked-chip-wrap">
|
|
{keywords.map((keyword) => (
|
|
<span key={keyword} className="tracked-chip">
|
|
{keyword}
|
|
<button
|
|
type="button"
|
|
className="tracked-chip-remove"
|
|
aria-label={`Rimuovi ${keyword}`}
|
|
onClick={() => onRemoveKeyword(keyword)}
|
|
>
|
|
x
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="settings-action-row">
|
|
<button type="button" className="settings-save-button" onClick={onSaveKeywords}>
|
|
<SaveIcon />
|
|
Salva
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function PlusIcon() {
|
|
return <span aria-hidden="true">+</span>
|
|
}
|
|
|
|
function SaveIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4Z" />
|
|
<path d="M7 3v6h8V3" />
|
|
<path d="M7 21v-6h10v6" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default TrackedKeywords
|