UI Components – Artemis Library

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container }  from '@mui/material';
import theme from '../../theme/theme.js';

const GraphTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            pt: theme.spacing(3),
            textAlign: 'center',
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
            mb: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
        },

import { Box, Grid, Link, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {
                color: theme.palette.grey[300]
            }
        },
        menu: {
            display: 'none',
            [theme.breakpoints.up('md')]: {
                display: 'block',
            }
        },

import { useState } from 'react';
import { Grid, Box, Typography, Container, Chip, Avatar, AvatarGroup, LinearProgress, FormControl, Select, MenuItem, Stack, Pagination } from '@mui/material';
import theme from '../../theme/theme';

const Projects = (props) => {
    const [age, setAge] = useState('');

    const handleChange = (event) => {
      setAge(event.target.value);
    };
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        top: {
            p: theme.spacing(3)
        },
        bottom: {
            padding: theme.spacing(3),

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[500],
            borderLeft: 4,
            borderColor: theme.palette.grey[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[50],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

import React from "react";
import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.warning[500],
            borderLeft: 4,
            borderColor: theme.palette.warning[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            marginBottom: theme.spacing(1)
        },
        text: {
            color: theme.palette.warning[50],
        }
    }

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.error[500],
            borderLeft: 4,
            borderColor: theme.palette.error[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            marginBottom: theme.spacing(1)
        },
        text: {
            color: theme.palette.error[50],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

import React from "react";
import { Grid, Box, Typography, Container, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Banner = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        wrapper: {
            pt: theme.spacing(4),
            px: theme.spacing(4),
            [theme.breakpoints.up('md')]: {
                pt: theme.spacing(7),
                px: theme.spacing(6),
            },
            backgroundColor: theme.palette.secondary[500],
            borderRadius: theme.spacing(0.5),
            textAlign: 'center'
        },
        title: {
            color: theme.palette.error[300],
            mb: theme.spacing(1),
            display: 'inline-block'

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.primary[500],
            borderLeft: 4,
            borderColor: theme.palette.primary[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            marginBottom: theme.spacing(1)
        },
        text: {
            color: theme.palette.primary[50],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.success[500],
            borderLeft: 4,
            borderColor: theme.palette.success[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            marginBottom: theme.spacing(1)
        },
        text: {
            color: theme.palette.success[50],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Container, Typography, Button }  from '@mui/material';
import theme from '../../theme/theme';

const Stats = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            padding: theme.spacing(3),
            boxShadow: theme.shadows[1]
        },
        button: {
            minWidth: 0,
            px: theme.spacing(1)
        }
    }
    const [radialBarPrimary] = useState({
        options: {
            chart: {

import { Grid, Box, Typography, Container, Avatar, Button } from '@mui/material';
import theme from '../../theme/theme';

const Users = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            position: 'relative',
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1],
            pt: theme.spacing(2.5),
            px: theme.spacing(3),
            pb: theme.spacing(3)
        },
        button: {
            position: 'absolute',
            top: theme.spacing(2),
            right: theme.spacing(2),
            minWidth: 0,
            px: theme.spacing(1)
        },

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container, LinearProgress, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const StatTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            p: theme.spacing(3),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[600]
        },
        unit: {
            color: theme.palette.grey[800]
        },
        chip: {
            color: theme.palette.common.white,

import { useState } from 'react';
import { Grid, Box, Typography, Link, Button, Divider, List, ListItemButton, ListItemIcon, ListItemText, Collapse, Chip, Avatar } from '@mui/material';
import theme from '../../theme/theme';

const Menu = (props) => {
    const [mobile, setMobile] = useState({ display: 'none' })
    const [open1, setOpen1] = useState(false);
    const [open3, setOpen3] = useState(false);
    const [open4, setOpen4] = useState(false);
    const [open5, setOpen5] = useState(false);
    const [open6, setOpen6] = useState(false);
    
    const handleClick1 = () => {
        setOpen1(!open1);
    };
    const handleClick3 = () => {
        setOpen3(!open3);
    };
    const handleClick4 = () => {
        setOpen4(!open4);
    };
    const handleClick5 = () => {
        setOpen5(!open5);
    };

import { Grid, Box, Typography, Container, Link }  from '@mui/material';
import theme from '../../theme/theme';

const GeneralTables = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            width: theme.spacing(144),
            [theme.breakpoints.up('lg')]: {
                width: 'auto'
            }
        },
        scroll: {
            overflow: 'auto',
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
        },
        subtitle2: {

import React from "react";
import { Grid, Box, Link, Typography, Container, Chip, Button }  from '@mui/material';
import theme from '../../theme/theme';

const Content = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1],
            overflow: 'hidden',
            height: '100%'
        },
        header: {
            pt: theme.spacing(3),
            px: theme.spacing(3),
            pb: theme.spacing(4),
            width: '100%',
        },
        bottom: {
            display: 'flex',

import { Box, Grid, Link, Typography, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        link: {
            textDecoration: 'none',
            color: theme.palette.grey[800]
        },
        hoverLink: {
            '&:hover': {
                color: theme.palette.grey[700]
            }
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Container }  from '@mui/material';
import theme from '../../theme/theme';

const Graphs = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        title: {
            mb: theme.spacing(1),
            [theme.breakpoints.up('sm')]: {
                mb: 0
            },
        },
        subtitle: {
            fontWeight: theme.typography.fontWeightRegular,
            color: theme.palette.grey[500]

import { Grid, Box, Typography, Container, LinearProgress }  from '@mui/material';
import theme from '../../theme/theme';

const StatTables = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        box2: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1],
            height: '100%'
        },
        header: {
            pt: theme.spacing(2),
            px: theme.spacing(3)
        },
        title: {
            color: theme.palette.grey[800],
        },
        subtitle: {
            color: theme.palette.grey[500],
        },

import { useState } from 'react';
import { Grid, Box, Typography, Container, Button, Stepper, Step, StepLabel, StepContent, Paper }  from '@mui/material';
import theme from '../../theme/theme';

const TaskTables = (props) => {
    const [activeStep, setActiveStep] = useState(0);

    const handleNext = () => {
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };
  
    const handleBack = () => {
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };
  
    const handleReset = () => {
      setActiveStep(0);
    };

    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[500],
            borderLeft: 4,
            borderColor: theme.palette.grey[600],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.common.white,
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[50],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C7.6 2 4 5.6 4 10C4 15.4 11 21.5 11.3 21.8C11.7 22.1 12.2 22.1 12.6 21.8C13 21.5 20 15.4 20 10C20 5.6 16.4 2 12 2ZM12 14C9.8 14 8 12.2 8 10C8 7.8 9.8 6 12 6C14.2 6 16 7.8 16 10C16 12.2 14.2 14 12 14Z" fill="#E1E4E8"/></svg>,