parent
914ed6fe9c
commit
ae4430b9eb
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Input, Streamfield } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
|
||||
});
|
||||
|
||||
interface IGroupTagsField {
|
||||
tags: string[]
|
||||
onChange(tags: string[]): void
|
||||
onAddItem(): void
|
||||
onRemoveItem(i: number): void
|
||||
maxItems?: number
|
||||
}
|
||||
|
||||
const GroupTagsField: React.FC<IGroupTagsField> = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => {
|
||||
return (
|
||||
<Streamfield
|
||||
label='Topics'
|
||||
hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
|
||||
component={HashtagField}
|
||||
values={tags}
|
||||
onChange={onChange}
|
||||
onAddItem={onAddItem}
|
||||
onRemoveItem={onRemoveItem}
|
||||
maxItems={maxItems}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface IHashtagField {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
|
||||
onChange(target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Input
|
||||
outerClassName='w-full'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupTagsField;
|
@ -0,0 +1,9 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
const groupTagSchema = z.object({
|
||||
name: z.string(),
|
||||
});
|
||||
|
||||
type GroupTag = z.infer<typeof groupTagSchema>;
|
||||
|
||||
export { groupTagSchema, type GroupTag };
|
Loading…
Reference in new issue