basic components

Signed-off-by: Pushkar Mishra <pushkarmishra029@gmail.com>

next.config.mjs

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  images: { unoptimized: true },
 }
 
 export default nextConfig;

package.json

@@ -9,16 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.0"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5"
   }
 }

src/app/components/navbar.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+
+const Navbar = () => {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" noWrap component="div">
+            Root folder &gt;name&gt; seleted
+          </Typography>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            {/* Add your icons here */}
+            <IconButton color="inherit">
+              {/* Your Icon 1 */}
+            </IconButton>
+            <IconButton color="inherit">
+              {/* Your Icon 2 */}
+            </IconButton>
+            <IconButton color="inherit">
+              {/* Your Icon 3 */}
+            </IconButton>
+            <IconButton color="inherit">
+              {/* Your Icon 4 */}
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+};
+
+export default Navbar;

src/app/components/sidebar.tsx

@@ -0,0 +1,68 @@
+'use client'
+import { Box, Typography } from '@mui/material';
+import ExploreIcon from '@mui/icons-material/Explore';
+import FolderIcon from '@mui/icons-material/Folder';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { useState} from 'react';
+
+export default function Sidebar() {
+  const [openNav, setOpenNav] = useState(false);
+  return (
+    <Box sx={{
+      width: "auto",
+      backgroundColor: "#5900f5",
+    }}>
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '5px 0px 5px 0px',
+        margin: '10px 10px',
+      }}>
+        <ExploreIcon fontSize="medium" sx={{
+          margin: '5px',
+        }} />
+        {openNav &&
+          <Typography
+            sx={{
+              padding: '0px 7px'
+            }}
+          >Navigate data</Typography>
+        }
+      </Box>
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '5px 0px 5px 0px',
+        margin: '10px 10px',
+      }}>
+        <FolderIcon fontSize="medium" sx={{
+          margin: '5px',
+        }} />
+        {openNav &&
+          <Typography
+            sx={{
+              padding: '0px 7px'
+            }}
+          >Manage folders</Typography>
+        }
+      </Box>
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '5px 0px 5px 0px',
+        margin: '10px 10px',
+      }}>
+        <SettingsIcon fontSize="medium" sx={{
+          margin: '5px',
+        }} />
+        {openNav &&
+          <Typography
+            sx={{
+              padding: '0px 7px'
+            }}
+          >Settings</Typography>
+        }
+      </Box>
+    </Box>
+  );
+}

src/app/manage_data/explorer.tsx

@@ -0,0 +1,47 @@
+import { Grid, Box, Typography } from '@mui/material';
+import dummyData from "./../mock_data.json";
+
+function shortLabel(label:string) {
+  if(label.length < 17) return label;
+  const labelpo = label.substring(0, 7);
+  const labelpl = label.substring(label.length - 7, label.length);
+  return labelpo + "..." + labelpl;
+}
+
+interface ExplorerProps {
+  no_of_boxes: number;
+}
+
+export default function Explorer({no_of_boxes}: ExplorerProps) {
+  const mdN = 12/no_of_boxes;
+  console.log(mdN); 
+  return (
+    <Box sx={{
+      backgroundColor: "white",
+      width: "75%",
+      overflowY: "scroll",
+    }}>
+      <Grid container spacing={2} sx={{
+        padding: '15px',
+      }}>
+        {dummyData.map((item, index) => (
+          <Grid item xs={12} md={mdN} key={index}>
+            <Box sx={{
+              width: "100%",
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+              height: '120px',
+              border: '1px solid black',
+              pt: '7px',
+              justifyContent: 'space-between',
+            }}>
+              <img src={item.imageUrl} alt={shortLabel(item.title)} width="auto" height="85px"></img>
+              <Typography fontSize="15px" color="black" align="center" margin="3px">{shortLabel(item.title)}</Typography>
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

src/app/manage_data/mock_tags.json

@@ -0,0 +1,32 @@
+[
+  { "tag": "Goldenrod" },
+  { "tag": "Turquoise" },
+  { "tag": "Indigo" },
+  { "tag": "Aquamarine" },
+  { "tag": "Blue" },
+  { "tag": "Green" },
+  { "tag": "Purple" },
+  { "tag": "Turquoise" },
+  { "tag": "Teal" },
+  { "tag": "Maroon" },
+  { "tag": "Khaki" },
+  { "tag": "Crimson" },
+  { "tag": "Red" },
+  { "tag": "Maroon" },
+  { "tag": "Pink" },
+  { "tag": "Goldenrod" },
+  { "tag": "Yellow" },
+  { "tag": "Goldenrod" },
+  { "tag": "Mauv" },
+  { "tag": "Turquoise" },
+  { "tag": "Crimson" },
+  { "tag": "Goldenrod" },
+  { "tag": "Maroon" },
+  { "tag": "Indigo" },
+  { "tag": "Turquoise" },
+  { "tag": "Green" },
+  { "tag": "Aquamarine" },
+  { "tag": "Puce" },
+  { "tag": "Pink" },
+  { "tag": "Crimson" }
+]

src/app/manage_data/tagger.tsx

@@ -0,0 +1,111 @@
+import {Grid, Box, Typography } from '@mui/material';
+import SortIcon from '@mui/icons-material/Sort';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import dummyData from "./mock_tags.json";
+
+interface TaggerProps {
+  no_of_boxes: number;
+}
+
+export default function Tagger({no_of_boxes}: TaggerProps) {
+  const mdN = 12/no_of_boxes;
+  return (
+    <Box sx={{
+      backgroundColor: "grey",
+      width: "25%",
+      overflowY:"scroll",
+    }}>
+      <Box sx={{
+        margin: '10px 10px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+          <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+            <Typography variant="h6">Sort</Typography>
+            <FormControlLabel
+              sx={{
+                display: 'block',
+              }}
+              control={
+                <Switch
+                  // checked={}
+                  // onChange={}
+                  name="loading"
+                  color="primary"
+                />
+              }
+              label=""
+            />
+          </Box>
+          <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+            <Typography variant="h6">Kinds</Typography>
+            <FormControlLabel
+              // sx={{
+              //   display: 'block',
+              // }}
+              control={
+                <Switch
+                  // checked={}
+                  // onChange={}
+                  name="loading"
+                  color="primary"
+                />
+              }
+              label=""
+            />
+          </Box>
+        </Box>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+          <SortIcon fontSize="medium" />
+          <Typography variant="h6">X</Typography>
+        </Box>
+      </Box>
+      {/* <Typography variant="h1">Hello</Typography> */}
+      <Box sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        margin: '10px 10px',
+      }}>
+        <Grid container spacing={1}>
+          {/* map here */}
+          {dummyData.map((item, index) => (
+            <Grid item xs={12} md={mdN} key={index}>
+              <Box sx={{
+                // width: "100%",
+                // display: 'flex',
+                // alignItems: 'center',
+                // flexDirection: 'column',
+                // height: '15vh',
+                // border: '1px solid black',
+                // pt: '7px',
+                // justifyContent: 'space-between',
+                backgroundColor: "blue",
+                // padding: "6px 9px",
+                borderRadius: "20px",
+                // mr: "6px",      
+              }}>
+                <Typography fontSize="15px" color="white" align="center" margin="3px">{item.tag}</Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Box>
+  );
+}