details.tsx

import * as React from 'react'
import { styled } from '@mui/material/styles'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell, { tableCellClasses } from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Typography from '@mui/material/Typography'

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 16,
    backgroundColor: theme.palette.common.white,
    ...theme.applyStyles('dark', {
      backgroundColor: '#262c32'
    })
  }
}))

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover },
  // hide last border
  '&:last-child td, &:last-child th': {
    border: 0
  }
}))

const typeInfo = 'CETTS'
const repoInfo = 'LinkAhead'
const dataSpInfo = 'RWTH'
const techInfo = 'EDC'

function createData (
  category: string,
  classification: string,
  logo: string

) {
  return { category, classification, logo }
}

const rows = [
  createData('Type:', typeInfo, ''),
  createData('Repository:', repoInfo, ''),
  createData('Dataspace:', dataSpInfo, ''),
  createData('Technology:', techInfo, '')
]

export default function CustomizedTables () {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
         {/* <TableRow>
            <StyledTableCell>Info1 </StyledTableCell>
            <StyledTableCell align="right">Info2</StyledTableCell>
            <StyledTableCell align="right">Info3</StyledTableCell>
          </TableRow> */}
        </TableHead>
        <TableBody >
          {rows.map((row) => (
            <StyledTableRow key={row.category}>
              <StyledTableCell component="th" scope="row" sx={{ border: 0 }}>
               <Typography variant="h6" gutterBottom> {row.category}</Typography>
              </StyledTableCell>
              <StyledTableCell align="left">{row.classification}</StyledTableCell>
              <StyledTableCell align="left" sx={{ border: 0 }}>{row.logo}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}