text: /*eslint-disable*/
  import React from "react";
  // react plugin for creating charts
  import ChartistGraph from "react-chartist";
  // @material-ui/core
  import { makeStyles } from "@material-ui/core/styles";
  import Icon from "@material-ui/core/Icon";
  // @material-ui/icons
  import Store from "@material-ui/icons/Store";
  import Warning from "@material-ui/icons/Warning";
  import DateRange from "@material-ui/icons/DateRange";
  import LocalOffer from "@material-ui/icons/LocalOffer";
  import Update from "@material-ui/icons/Update";
  import ArrowUpward from "@material-ui/icons/ArrowUpward";
  import AccessTime from "@material-ui/icons/AccessTime";
  import Accessibility from "@material-ui/icons/Accessibility";
  import BugReport from "@material-ui/icons/BugReport";
  import Code from "@material-ui/icons/Code";
  import Cloud from "@material-ui/icons/Cloud";
  // core components
  import Button from "components/CustomButtons/Button.js";
  import GridItem from "components/Grid/GridItem.js";
  import GridContainer from "components/Grid/GridContainer.js";
  import Table from "components/Table/Table.js";
  import Tasks from "components/Tasks/Tasks.js";
  import CustomTabs from "components/CustomTabs/CustomTabs.js";
  import Danger from "components/Typography/Danger.js";
  import Card from "components/Card/Card.js";
  import CardHeader from "components/Card/CardHeader.js";
  import CardAvatar from "components/Card/CardAvatar.js";
  import CardIcon from "components/Card/CardIcon.js";
  import CardBody from "components/Card/CardBody.js";
  import CardFooter from "components/Card/CardFooter.js";
  import SnackbarContent from "components/Snackbar/SnackbarContent.js";
  
  import {
    dailySalesChart,
    emailsSubscriptionChart,
    completedTasksChart
  } from "variables/charts.js";
  
  import styles from "assets/jss/material-dashboard-react/views/rtlStyle.js";
  
  import avatar from "assets/img/faces/marc.jpg";
  
  let bugs = [
    "طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن؟",
    "	نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند؟",
    "همان حال کار آنها به نوعی وابسته به متن می‌باشد",
    "	آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند"
  ];
  let website = [
    "بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته",
    "اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید؟"
  ];
  let server = [
    "گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی؟",
    "از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی ؟",
    "از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند؟"
  ];
  
  const useStyles = makeStyles(styles);
  
  export default function HomePage() {
    const classes = useStyles();
    return (
      <div>
        <GridContainer>
          <GridItem xs={12} sm={6} md={3}>
            <Card>
              <CardHeader color="warning" stats icon>
                <CardIcon color="warning">
                  <Icon>content_copy</Icon>
                </CardIcon>
                <p className={classes.cardCategory}>فضا مصرف شده</p>
                <h3 className={classes.cardTitle}>
                  49/50 <small>GB</small>
                </h3>
              </CardHeader>
              <CardFooter stats>
                <div className={classes.stats}>
                  <Danger>
                    <Warning />
                  </Danger>
                  <a href="#pablo" onClick={e => e.preventDefault()}>
                    فضای بیشتری داشته باشید...
                  </a>
                </div>
              </CardFooter>
            </Card>
          </GridItem>
          </GridContainer>
        </div>
    );
  }
  