From 62fd2cb1d326d7be87b6db59849105def25ea140 Mon Sep 17 00:00:00 2001
From: monoid <jaeung@prelude.duckdns.org>
Date: Mon, 20 Jun 2022 17:15:45 +0900
Subject: [PATCH] replace grid

---
 src/client/component/contentinfo.tsx | 34 ++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx
index 77e3f17..326ca89 100644
--- a/src/client/component/contentinfo.tsx
+++ b/src/client/component/contentinfo.tsx
@@ -2,7 +2,7 @@ import React, { } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Document } from '../accessor/document';
 
-import { Link, Paper, Theme, Box, useTheme, Typography } from '@mui/material';
+import { Link, Paper, Theme, Box, useTheme, Typography, Grid } from '@mui/material';
 import { ThumbnailContainer } from '../page/reader/reader';
 import { TagChip } from '../component/tagchip';
 
@@ -117,7 +117,7 @@ export const ContentInfo = (props: {
                 {props.short ? (<Box /*className={propclasses.tag_list ?? classes.tag_list}*/>{document.tags.map(x =>
                     (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
                 )}</Box>) : (
-                    <ComicDetailTag tags={document.tags}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
+                    <ComicDetailTag tags={document.tags} path={document.basepath+"/"+document.filename}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
                 }
             </Box>
         </Box>
@@ -125,9 +125,11 @@ export const ContentInfo = (props: {
 }
 
 function ComicDetailTag(prop: {
-    tags: string[]/*classes:{
+    tags: string[];/*classes:{
     tag_list:string
-}*/}) {
+}*/ 
+    path?: string;
+}) {
     let allTag = prop.tags;
     const tagKind = ["artist", "group", "series", "type", "character"];
     let tagTable: { [kind: string]: string[] } = {};
@@ -136,16 +138,28 @@ function ComicDetailTag(prop: {
         tagTable[kind] = tags;
         allTag = allTag.filter(x => !x.startsWith(kind + ":"));
     }
-    return (<React.Fragment>
+    return (<Grid container>
         {tagKind.map(key => (
             <React.Fragment key={key}>
-                <Typography variant='subtitle1'>{key}</Typography>
-                <Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
+                <Grid item xs={3}>
+                    <Typography variant='subtitle1'>{key}</Typography>
+                </Grid>
+                <Grid item xs={9}>
+                    <Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
+                </Grid>
             </React.Fragment>
         ))}
+        { prop.path != undefined && <><Grid item xs={3}>
+            <Typography variant='subtitle1'>Path</Typography>
+        </Grid><Grid item xs={9}>
+                <Box>{prop.path}</Box>
+            </Grid></>
+        }
+        <Grid item xs={3}>
         <Typography variant='subtitle1'>Tags</Typography>
-        <Box /*lassName={prop.classes.tag_list}*/>
+        </Grid>
+        <Grid item xs={9}>
             {allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
-        </Box>
-    </React.Fragment>);
+        </Grid>
+    </Grid>);
 }
\ No newline at end of file