Admin Dashboard 0.1.0

.github/workflows/cd.yml

@@ -0,0 +1,27 @@
+name: Build Project
+
+on:
+  push:
+    branches: [ develop ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build and Push
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v2
+
+      - name: Install all dependencies
+        run: npm install --force
+
+      - name: Build
+        run:  npm run build 
+
+      - name: Push
+        uses: s0/git-publish-subdir-action@develop
+        env:
+          REPO: self
+          BRANCH: deploy 
+          FOLDER: dist
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+          MESSAGE: "Build: ({sha}) {msg}" 

package.json

@@ -29,6 +29,7 @@
     "react-query": "^4.0.0",
     "react-router-dom": "^6.2.2",
     "react-tsparticles": "^2.2.2",
+    "react-zoomable-ui": "^0.9.1",
     "sass": "^1.49.9",
     "styled-components": "^5.3.5",
     "tsparticles": "^2.2.3",

src/components/Navbar/style.scss

@@ -5,7 +5,6 @@
   z-index: 99;
   background-color: $c-white;
   box-shadow: 0 2px 8px $c-grey1a;
-  margin-bottom: 40px;
   &__container {
     display: flex;
     justify-content: space-between;

src/components/Page.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { forwardRef } from 'react';
+
+
+// ----------------------------------------------------------------------
+
+const Page = forwardRef(({ children, title = '', meta, ...other }, ref) => (
+  <>
+    <Helmet>
+      <title>{`${title} | The Archive of Vanitas`}</title>
+      {meta}
+    </Helmet>
+
+    <div ref={ref} {...other}>
+      {children}
+    </div>
+  </>
+));
+
+Page.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  meta: PropTypes.node,
+};
+
+export default Page;

src/hooks/useResponsive.js

@@ -0,0 +1,34 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+// ----------------------------------------------------------------------
+
+export default function useResponsive(query, key, start, end) {
+  const theme = useTheme();
+
+  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
+
+  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
+
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
+
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
+
+  if (query === 'up') {
+    return mediaUp;
+  }
+
+  if (query === 'down') {
+    return mediaDown;
+  }
+
+  if (query === 'between') {
+    return mediaBetween;
+  }
+
+  if (query === 'only') {
+    return mediaOnly;
+  }
+  return null;
+}

src/layouts/Main/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Navbar from 'src/components/Navbar';
+import Footer from 'src/components/Footer';
+
+import './style.scss';
+
+const MainLayout = () => {
+  return (
+    <div className="main-layout">
+      <Navbar />
+      <div className="main-layout__container">
+        <Outlet/>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default MainLayout;

src/components/Layout/style.scss → src/layouts/Main/style.scss

@@ -1,13 +1,14 @@
 @import 'src/theme/main.scss';
-.layout {
+.main-layout {
   background-color: $c-layout-bg;
 
   &__container {
-    min-height: calc(100vh - 164px);
+    position: relative;
+    min-height: calc(100vh - 160px);
     width: 100%;
     max-width: 1200px;
     margin: auto;
     padding-bottom: 150px;
-
+    padding-top: 40px;
   }
 }