diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx new file mode 100644 index 0000000000..33518a4b4f --- /dev/null +++ b/packages/core/src/layout/HeaderTabs/index.tsx @@ -0,0 +1,69 @@ +/* + * 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. + */ + +// TODO(blam): Remove this implementation when the Tabs are ready +// This is just a temporary solution to implementing tabs for now + +import React from 'react'; + +import { makeStyles, Tabs, Tab } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + tabsWrapper: { + gridArea: 'pageSubheader', + }, + defaultTab: { + padding: theme.spacing(3, 3), + ...theme.typography.caption, + textTransform: 'uppercase', + fontWeight: 'bold', + color: theme.palette.text.secondary, + }, + selected: { + color: theme.palette.text.primary, + }, +})); + +export type Tab = { + id: string; + label: string; +}; +export const HeaderTabs: React.FC<{ tabs: Tab[] }> = ({ tabs }) => { + const styles = useStyles(); + + return ( +
+ + {tabs.map((tab, index) => ( + + ))} + +
+ ); +}; diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts index e8341e1124..9e1298f3d6 100644 --- a/packages/core/src/layout/index.ts +++ b/packages/core/src/layout/index.ts @@ -24,3 +24,4 @@ export * from './InfoCard'; export * from './Page'; export * from './Sidebar'; export * from './TabbedCard'; +export * from './HeaderTabs'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 84c35e406a..aeaef3e202 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -25,6 +25,7 @@ import { Page, pageTheme, useApi, + HeaderTabs, } from '@backstage/core'; import { useAsync } from 'react-use'; import CatalogTable from '../CatalogTable/CatalogTable'; @@ -101,11 +102,33 @@ const CatalogPage: FC<{}> = () => { rowData && rowData.location ? rowData.location.type !== 'github' : true, }), ]; + + // TODO: replace me with the proper tabs implemntation + const tabs = [ + { + id: 'services', + label: 'Services', + }, + { + id: 'websites', + label: 'Websites', + }, + { + id: 'libs', + label: 'Libraries', + }, + { + id: 'documentation', + label: 'Documentation', + }, + ]; + return (
+ = () => { } /> +