diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js index 5ec157a..8bd7eda 100644 --- a/src/components/ItemView/ItemView.js +++ b/src/components/ItemView/ItemView.js @@ -1,10 +1,15 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from "prop-types"; -import { Paper, makeStyles, useTheme } from '@material-ui/core'; +import { Paper, AppBar, Tab, makeStyles, useTheme } from '@material-ui/core'; +// Import these tab components from @material-ui/lab instead of @material-ui/core for automatic a11y props +// See: https://material-ui.com/components/tabs/#experimental-api +import { TabContext, TabList, TabPanel } from '@material-ui/lab'; import ItemMetadataView from "../ItemMetadataView/" import ItemBodyView from "../ItemBodyView"; +import ItemHeaderView from "../ItemHeaderView"; export default function ItemView({ activeItem }){ + const [activeTab, setActiveTab] = useState('Conversation'); const theme = useTheme(); const useStyles = makeStyles({ @@ -12,15 +17,35 @@ export default function ItemView({ activeItem }){ paddingTop: theme.spacing(1), paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), - border: "none" + border: "none", + }, + "tabPanelPadding": { + padding: `${theme.spacing(2)}px ${theme.spacing(2)}px` } }); const classes = useStyles(); -return( + const handleTabChange = (event, newValue) => { + setActiveTab(newValue); + }; + + return( - + + + + + + + + + + + + + + ); };