diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx
new file mode 100644
index 0000000000..cdef267f95
--- /dev/null
+++ b/packages/core/src/layout/HeaderTabs/index.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+import { makeStyles, Tabs, Tab } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ wrapper: {
+ gridArea: 'pageSubheader',
+ },
+});
+
+export const HeaderTabs: React.FC<{}> = () => {
+ const styles = useStyles();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx b/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx
new file mode 100644
index 0000000000..20e1be1a9a
--- /dev/null
+++ b/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useStarredEntities } from '../../hooks/useStarredEntites';
+
+export const StarredCount: React.FC<{}> = () => {
+ const { starredEntities } = useStarredEntities();
+ return {starredEntities.size};
+};
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 779bcc7693..ef19e728e5 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -32,7 +32,15 @@ import {
CatalogFilter,
CatalogFilterItem,
} from '../CatalogFilter/CatalogFilter';
-import { Button, makeStyles, Typography, Link } from '@material-ui/core';
+import {
+ Button,
+ makeStyles,
+ Typography,
+ Link,
+ AppBar,
+ Tabs,
+ Tab,
+} from '@material-ui/core';
import { filterGroups, defaultFilter } from '../../data/filters';
import { Link as RouterLink } from 'react-router-dom';
import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
@@ -51,6 +59,7 @@ const useStyles = makeStyles(theme => ({
import { catalogApiRef } from '../..';
import { envelopeToComponent } from '../../data/utils';
import { Component } from '../../data/component';
+import { HeaderTabs } from '@backstage/core/src/layout/HeaderTabs';
const CatalogPage: FC<{}> = () => {
const catalogApi = useApi(catalogApiRef);
@@ -113,6 +122,7 @@ const CatalogPage: FC<{}> = () => {
+
= () => {
}
/>
+