diff --git a/src/components/item/sharing/CustomizedTagsEdit.js b/src/components/item/sharing/CustomizedTagsEdit.js index 115f2b9ba..29442ed33 100644 --- a/src/components/item/sharing/CustomizedTagsEdit.js +++ b/src/components/item/sharing/CustomizedTagsEdit.js @@ -2,7 +2,13 @@ import React, { useContext, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Loader } from '@graasp/ui'; import { useTranslation } from 'react-i18next'; -import { Typography, TextField, Button, makeStyles } from '@material-ui/core'; +import { + Typography, + TextField, + Button, + Chip, + makeStyles, +} from '@material-ui/core'; import SaveIcon from '@material-ui/icons/Save'; import { useParams } from 'react-router'; import { MUTATION_KEYS } from '@graasp/query-client'; @@ -39,7 +45,7 @@ const CustomizedTagsEdit = ({ item, edit }) => { useEffect(() => { if (settings) { - setDisplayValues(settings.tags?.join(' ,') || ''); + setDisplayValues(settings.tags?.join(', ') || ''); } }, [settings]); @@ -90,6 +96,10 @@ const CustomizedTagsEdit = ({ item, edit }) => { {t('Save')} + {t('Tags Preview')} + {settings?.tags?.map((tag) => ( + + ))} ); };