UI Components – Artemis Library

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

const Users = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            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: {
            minWidth: 0,
            px: theme.spacing(1),
            [theme.breakpoints.up('lg')] : {
                mt: theme.spacing(1.2)
            }
        },
        avatar: {

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

const Banner = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            backgroundColor: theme.palette.primary[500],
            borderRadius: theme.spacing(0.5),
            overflow: 'hidden'
        },
        header: {
            padding: theme.spacing(4)
        },
        title: {
            color: theme.palette.common.white
        },
        subtitle: {
            color: theme.palette.primary[100],
            fontWeight: theme.typography.fontWeightMedium,
            mb: theme.spacing(8)

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[50],
            borderLeft: 4,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.error[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#5D221B"/></svg>,
        ...props.content
    }

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.success[50],
            borderLeft: 4,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.success[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.93329 6.00008L11.1333 1.80008C11.4 1.53341 11.4 1.13341 11.1333 0.866748C10.8666 0.600081 10.4666 0.600081 10.2 0.866748L5.99996 5.06675L1.79996 0.866748C1.53329 0.600081 1.13329 0.600081 0.866626 0.866748C0.599959 1.13341 0.599959 1.53341 0.866626 1.80008L5.06663 6.00008L0.866626 10.2001C0.733293 10.3334 0.666626 10.4667 0.666626 10.6667C0.666626 11.0667 0.933293 11.3334 1.33329 11.3334C1.53329 11.3334 1.66663 11.2667 1.79996 11.1334L5.99996 6.93341L10.2 11.1334C10.3333 11.2667 10.4666 11.3334 10.6666 11.3334C10.8666 11.3334 11 11.2667 11.1333 11.1334C11.4 10.8667 11.4 10.4667 11.1333 10.2001L6.93329 6.00008Z" fill="#094B35"/></svg>,
        ...props.content
    }

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[50],
            borderLeft: 4,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.warning[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93329 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8666 2.60008 12.4666 2.60008 12.2 2.86675L7.99996 7.06675L3.79996 2.86675C3.53329 2.60008 3.13329 2.60008 2.86663 2.86675C2.59996 3.13341 2.59996 3.53341 2.86663 3.80008L7.06663 8.00008L2.86663 12.2001C2.73329 12.3334 2.66663 12.4667 2.66663 12.6667C2.66663 13.0667 2.93329 13.3334 3.33329 13.3334C3.53329 13.3334 3.66663 13.2667 3.79996 13.1334L7.99996 8.93341L12.2 13.1334C12.3333 13.2667 12.4666 13.3334 12.6666 13.3334C12.8666 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93329 8.00008Z" fill="#623110"/></svg>,
        ...props.content
    }

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[50],
            borderLeft: 4,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.primary[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93334 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8667 2.60008 12.4667 2.60008 12.2 2.86675L8 7.06675L3.8 2.86675C3.53334 2.60008 3.13334 2.60008 2.86667 2.86675C2.60001 3.13341 2.60001 3.53341 2.86667 3.80008L7.06667 8.00008L2.86667 12.2001C2.73334 12.3334 2.66667 12.4667 2.66667 12.6667C2.66667 13.0667 2.93334 13.3334 3.33334 13.3334C3.53334 13.3334 3.66667 13.2667 3.8 13.1334L8 8.93341L12.2 13.1334C12.3333 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93334 8.00008Z" fill="#161258"/></svg>,
        ...props.content
    }

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[50],
            borderLeft: 4,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.grey[800]
        }
    }
    
    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#293039"/></svg>,
        ...props.content
    }

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 { Grid, Box, Typography, Container, Chip, Avatar, Button, AvatarGroup } from '@mui/material';
import theme from '../../theme/theme';

const Projects = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            padding: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        header: {
            position: 'relative'
        },
        button1: {
            position: 'absolute',
            right: theme.spacing(1),
            top: theme.spacing(1),
            fontSize: theme.spacing(1.5),
            height: theme.spacing(3)
        },

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 { Grid, Box, Typography, Chip, Container }  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],
            pl: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
            mt: theme.spacing(1),
            mb: theme.spacing(1)
        },
        chip: {

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 { 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 { useState } from 'react';
import { Grid, Box, Typography, Link, Container, Chip, Button, Tabs, Tab, Checkbox }  from '@mui/material';
import theme from '../../theme/theme';

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }

import { useState } from 'react';
import { Grid, Box, Typography, Container, Tabs, Tab, Checkbox, LinearProgress, Button, Link }  from '@mui/material';
import theme from '../../theme/theme';

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }

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

const UserTable = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            backgroundColor: theme.palette.common.white,
            p: theme.spacing(5),
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        title: {
            color: theme.palette.grey[800]
        },
        subtitle: {
            color: theme.palette.grey[500],
            fontWeight: theme.typography.fontWeightRegular
        },
        chip: {
            fontSize: theme.spacing(1.5)
        },

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

const FileTable = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {
            backgroundColor: theme.palette.common.white,
            fontWeight: theme.typography.fontWeightRegular,
        },
        img: {
            display: 'block'

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

const Users = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            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: {
            minWidth: 0,
            px: theme.spacing(1),
            [theme.breakpoints.up('lg')] : {
                mt: theme.spacing(1.2)
            }
        },
        avatar: {

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 { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container, LinearProgress, MenuItem, Select, FormControl, Button }  from '@mui/material';
import theme from '../../theme/theme';

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

    const handleChange = (event) => {
      setAge(event.target.value);
    };

    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            padding: theme.spacing(3),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        title: {
            color: theme.palette.grey[800],