pleroma/app/soapbox/features/admin/components/admin-tabs.tsx

43 lines
1.2 KiB
TypeScript
Raw Normal View History

2022-04-28 13:04:49 -07:00
import React from 'react';
2022-04-28 13:14:58 -07:00
import { useIntl, defineMessages } from 'react-intl';
2022-04-28 13:04:49 -07:00
import { Tabs } from 'soapbox/components/ui';
2022-04-28 13:28:08 -07:00
import { useAppSelector } from 'soapbox/hooks';
2022-04-28 13:04:49 -07:00
2022-04-28 13:14:58 -07:00
const messages = defineMessages({
dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
reports: { id: 'admin_nav.reports', defaultMessage: 'Reports' },
waitlist: { id: 'admin_nav.awaiting_approval', defaultMessage: 'Waitlist' },
});
2022-04-28 13:04:49 -07:00
interface IAdminTabs {
activeItem: 'dashboard' | 'reports' | 'approval',
}
const AdminTabs: React.FC<IAdminTabs> = ({ activeItem }) => {
2022-04-28 13:14:58 -07:00
const intl = useIntl();
2022-04-28 13:04:49 -07:00
2022-04-28 13:28:08 -07:00
const approvalCount = useAppSelector(state => state.admin.awaitingApproval.count());
const reportsCount = useAppSelector(state => state.admin.openReports.count());
2022-04-28 13:04:49 -07:00
const tabs = [{
name: 'dashboard',
2022-04-28 13:14:58 -07:00
text: intl.formatMessage(messages.dashboard),
to: '/admin',
2022-04-28 13:04:49 -07:00
}, {
name: 'reports',
2022-04-28 13:14:58 -07:00
text: intl.formatMessage(messages.reports),
to: '/admin/reports',
2022-04-28 13:28:08 -07:00
count: reportsCount,
2022-04-28 13:04:49 -07:00
}, {
name: 'approval',
2022-04-28 13:14:58 -07:00
text: intl.formatMessage(messages.waitlist),
to: '/admin/approval',
2022-04-28 13:28:08 -07:00
count: approvalCount,
2022-04-28 13:04:49 -07:00
}];
return <Tabs items={tabs} activeItem={activeItem} />;
};
export default AdminTabs;