manga search UI done

2021-01-20 15:26:52 +03:30
parent 48f29edf6c
commit c537c1bf29
6 changed files with 97 additions and 21 deletions
@@ -0,0 +1,26 @@
+import React from 'react';
+import MangaCard from './MangaCard';
+
+interface IProps{
+    mangas: IManga[]
+    message?: string
+}
+
+export default function MangaGrid(props: IProps) {
+    const { mangas, message } = props;
+    let mapped;
+
+    if (mangas.length === 0) {
+        mapped = <h3>{message !== undefined ? message : 'loading...'}</h3>;
+    } else {
+        mapped = (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+                {mangas.map((it) => (
+                    <MangaCard manga={it} />
+                ))}
+            </div>
+        );
+    }
+
+    return mapped;
+}
@@ -48,6 +48,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
                        <ListItemText primary="Sources" />
                    </ListItem>
                </Link>
+                <Link to="/search" style={{ color: 'inherit', textDecoration: 'none' }}>
+                    <ListItem button key="Search">
+                        <ListItemIcon>
+                            <InboxIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Global Search" />
+                    </ListItem>
+                </Link>
            </List>
        </div>
    );