diff --git a/app/reports/page-content.tsx b/app/reports/page-content.tsx index 291867d..b0da09f 100644 --- a/app/reports/page-content.tsx +++ b/app/reports/page-content.tsx @@ -29,6 +29,10 @@ import { useFluentReportSearchParams } from '@/reports/useFluentReportSearch' import { useLabelerAgent } from '@/shell/ConfigurationContext' import { WorkspacePanel } from 'components/workspace/Panel' import { useWorkspaceOpener } from '@/common/useWorkspaceOpener' +import { + EmbedTypePicker, + EmbedTypePickerForModerationQueue, +} from '@/common/EmbedTypePicker' const TABS = [ { @@ -233,7 +237,10 @@ export const ReportsPageContent = () => {
- +
+ + +
{items.map((item) => ( diff --git a/components/common/EmbedTypePicker.tsx b/components/common/EmbedTypePicker.tsx new file mode 100644 index 0000000..e005809 --- /dev/null +++ b/components/common/EmbedTypePicker.tsx @@ -0,0 +1,86 @@ +import { ChevronDownIcon } from '@heroicons/react/20/solid' +import { Dropdown } from './Dropdown' +import { usePathname, useRouter, useSearchParams } from 'next/navigation' + +const EmbedTypeTitles = { + image: 'Image', + video: 'Video', + external: 'External', +} + +export const EmbedTypePicker = ({ + embedType, + setEmbedType, +}: { + embedType?: string + setEmbedType: (embedType?: string) => void +}) => { + return ( + setEmbedType(), + }, + { + id: 'image', + text: EmbedTypeTitles['image'], + onClick: () => setEmbedType('image'), + }, + { + id: 'video', + text: EmbedTypeTitles['video'], + onClick: () => setEmbedType('video'), + }, + { + id: 'external', + text: EmbedTypeTitles['external'], + onClick: () => setEmbedType('external'), + }, + ]} + data-cy="lang-selector" + > + {embedType ? EmbedTypeTitles[embedType] : 'Embed type'} + + + ) +} + +export const EmbedTypePickerForModerationQueue = () => { + const searchParams = useSearchParams() + const router = useRouter() + const pathname = usePathname() + + const tagsParam = searchParams.get('tags') + + const tags = tagsParam?.split(',') || [] + + const includedEmbedTypes = tags + .filter((tag) => tag.startsWith('embed:')) + .map((t) => t.replace('embed:', '')) + + const setEmbedType = (embedType?: string) => { + const nextParams = new URLSearchParams(searchParams) + + if (embedType) { + nextParams.set('tags', `embed:${embedType}`) + } else { + nextParams.delete('tags') + } + + router.push((pathname ?? '') + '?' + nextParams.toString()) + } + + return ( + + ) +}