Revize 3ec590e6

re #9369 item left col display text

frontend/src/features/Catalog/CatalogItemDetail.tsx

@@ +1 @@
+import { Divider, Grid, Paper, Typography } from '@mui/material'
+import { Fragment, ReactNode } from 'react'
+import { CatalogItemDto } from '../../swagger/data-contracts'
 
-export default {}
+const CatalogItemDetail = () => {
+    // TODO fetch from api
+    const item: CatalogItemDto = {
+        id: '1',
+        name: 'Abaindi',
+        alternativeNames: ['Abaindi', 'Tell muhamad', 'and his waifu'],
+        certainty: 100,
+        longitude: 27.22,
+        latitude: 27.22,
+        bibliography: ['A', 'V muhamad', '😭😂'],
+        writtenForms: ['sadsadsa', 'sadTell muhamad', 'and his waifu'],
+        types: ['City', 'Town', 'Village'],
+        countries: ['Sidonu', 'Lebanon', 'Syria'],
+    }
+
+    const mapToRow = (rowName: string, items: string[]): ReactNode => (
+        <Fragment>
+            <Grid sx={{ my: 2 }} container justifyContent="space-around">
+                <Grid item xs={8} sx={{ px: 1 }}>
+                    <Typography>{rowName}</Typography>
+                </Grid>
+                <Grid item xs={4} sx={{ ml: 'auto' }}>
+                    {items.map((item) => (
+                        <Typography>{item}</Typography>
+                    ))}
+                    {items.map((itm, idx) => () => <Fragment></Fragment>)}
+                </Grid>
+            </Grid>
+        </Fragment>
+    )
+
+    const rows = [
+        {
+            rowName: 'Name',
+            items: [item.name],
+        },
+        {
+            rowName: 'Alternative Names',
+            items: item.alternativeNames,
+        },
+        {
+            rowName: 'Written Forms',
+            items: item.writtenForms,
+        },
+        {
+            rowName: 'Type',
+            items: item.types,
+        },
+        {
+            rowName: 'State or Territory',
+            items: item.countries,
+        },
+        {
+            rowName: 'Coordinates',
+            items: [`${item.longitude} ${item.latitude}`],
+        },
+
+        {
+            rowName: 'Certainty',
+            // @ts-ignore
+            items: [item.certainty],
+        },
+        {
+            rowName: 'Bibliography',
+            items: item.bibliography,
+        },
+        // TODO description
+    ]
+
+    return (
+        // TODO remove min height
+        <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
+            <Grid container justifyContent="space-around">
+                {/* <Paper style={{ minHeight: '100vh', borderRadius: 0 }}> */}
+                <Grid item xs={6} sx={{ px: 2 }}>
+                    {rows.map((row, idx) => {
+                        return (
+                            <Fragment>
+                                {mapToRow(
+                                    row.rowName as string,
+                                    row.items as string[]
+                                )}
+                                {idx === rows.length - 1 ? null : <Divider />}
+                            </Fragment>
+                        )
+                    })}
+                </Grid>
+
+                <Grid item xs={6}>
+                    {/* Map */}
+                </Grid>
+                {/* </Paper> */}
+            </Grid>
+        </Paper>
+    )
+}
+
+export default CatalogItemDetail

frontend/src/features/Home/Home.tsx

@@ -1 +1 @@
 import { Button } from '@mui/material'
 import { useDispatch, useSelector } from 'react-redux'
 import { logout } from '../Auth/userSlice'
+import CatalogItemDetail from '../Catalog/CatalogItemDetail'
 import { RootState } from '../redux/store'
 
 const Home = () => {
@@ -23 +24 @@
                     Logout
                 </Button>
             ) : null}
+            <CatalogItemDetail />
         </>
     )
 }