Bootcamp: Details page #157: Add BootcampViewSection component and re…

…lated styles

src/section/bootcamp/index.ts

@@ -2,3 +2,5 @@ export { default as Bootcamp } from './bootcamp'
 export { default as BootcampSearch } from './bootcamp-search'
 export { default as BootcampCard } from './bootcamp-card'
 export { default as BootcampCareer } from './bootcamp-career'
+export { default as BootcampViewSection } from './view/view'
+export * from './style'

src/section/bootcamp/style.tsx

@@ -0,0 +1,40 @@
+import { styled } from '@mui/material/styles'
+import { m } from 'framer-motion'
+import { TableRow, TableContainer, TableCell, Collapse } from '@mui/material'
+
+export const SRoot = styled(m.div)({
+  maxWidth: '100vw',
+  margin: '0 auto'
+})
+
+export const STableContainer = styled(TableContainer)({
+  boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
+  borderRadius: 2,
+  overflow: 'hidden'
+})
+
+export const STableHeader = styled(TableRow)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary.main,
+  color: theme.palette.common.white,
+  paddingRight: '1rem',
+  paddingLeft: '1rem'
+}))
+
+export const STableRow = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover
+  }
+}))
+
+export const SCollapse = styled(Collapse)(({ theme }) => ({
+  '& .MuiTableCell-root': {
+    padding: '1rem',
+    backgroundColor: 'transparent'
+  }
+}))
+
+export const STableHeadCell = styled(TableCell)(({ theme }) => ({
+  fontWeight: 'bold',
+  fontSize: '1rem',
+  backgroundColor: 'transparent'
+}))