62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
import { clsx } from 'clsx'
|
||
|
|
|
||
|
|
import { useLocalize } from '../../../context/localize'
|
||
|
|
import { Button } from '../Button'
|
||
|
|
import { DropdownSelect } from '../DropdownSelect'
|
||
|
|
|
||
|
|
import styles from './UserSearch.module.scss'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
class?: string
|
||
|
|
placeholder: string
|
||
|
|
onChange: (value: string) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const UserSearch = (props: Props) => {
|
||
|
|
const { t } = useLocalize()
|
||
|
|
const roles = [
|
||
|
|
{
|
||
|
|
title: t('Editor'),
|
||
|
|
description: t('Can write and edit text directly, and accept or reject suggestions from others'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: t('Co-author'),
|
||
|
|
description: t('Can make any changes, accept or reject suggestions, and share access with others'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: t('Commentator'),
|
||
|
|
description: t('Can offer edits and comments, but cannot edit the post or share access with others'),
|
||
|
|
},
|
||
|
|
]
|
||
|
|
const handleInputChange = (value: string) => {
|
||
|
|
props.onChange(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class={clsx(styles.UserSearch, props.class)}>
|
||
|
|
<div class={styles.searchHeader}>
|
||
|
|
<div class={styles.field}>
|
||
|
|
<input
|
||
|
|
class={styles.input}
|
||
|
|
type="text"
|
||
|
|
placeholder={props.placeholder ?? t('Search')}
|
||
|
|
onChange={(e) => handleInputChange(e.target.value)}
|
||
|
|
/>
|
||
|
|
<DropdownSelect selectItems={roles} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button variant={'bordered'} size={'M'} value={t('Add')} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class={styles.teaser}>
|
||
|
|
<h3>{t('Coming soon')}</h3>
|
||
|
|
<p>
|
||
|
|
{t(
|
||
|
|
'We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues',
|
||
|
|
)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|