diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index c791de031d..ac101c6583 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -6,17 +6,24 @@ import { Page, pageTheme, Content, + ContentHeader, + HeaderLabel, } from '@spotify-backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; const ExampleComponent: FC<{}> = () => ( -
+
+ + +
- - - Plugin page title - + + diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index 1282a08e94..df7829f3c0 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -6,14 +6,19 @@ import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; -import LinearProgress from '@material-ui/core/LinearProgress'; import Alert from '@material-ui/lab/Alert'; import { useAsync } from 'react-use'; +import { Progress } from '@spotify-backstage/core'; const useStyles = makeStyles({ table: { minWidth: 650, }, + avatar: { + height: 32, + width: 32, + borderRadius: '50%', + }, }); type User = { @@ -34,7 +39,7 @@ type User = { name: string; // "TFN", value: string; // "796260432" }; - picture: object; // {large: "https://randomuser.me/api/portraits/men/95.jpg",…} + picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…} nat: string; // "AU" }; @@ -50,6 +55,7 @@ export const DenseTable: FC = ({ users }) => { + Avatar Name Email Nationality @@ -58,6 +64,13 @@ export const DenseTable: FC = ({ users }) => { {users.map(user => ( + + {user.name.first} + {user.name.first} {user.name.last} @@ -79,7 +92,7 @@ const ExampleFetchComponent: FC<{}> = () => { }, []); if (loading) { - return ; + return ; } else if (error) { return {error.message}; }