Introduction

Ani is a lightweight and feature rich admin template that is clean to use. An easy layout, with a clean essence, constructed for range and powered via a unique set of six special home styles, constructed for instant, simple, stylish and intuitive browsing that allows to speed-up your development.

We code the brand new web widespread, the use of the energy of React, NextJs, Redux, Redux Form, Bootstrap4 and Redux, developing exceptional, custom coded items, with most effective markup in the marketplace. Complete modularized React structure, getting you extra toward integrate with a backend. Highly recommended for small scale projects as it is easily manageable.

General Syntax of React NextJs Component

import * as React from "react";
import Link from "next/link";
import { ProgressBar } from 'react-bootstrap';
import * as styles from "../../../styles/global.scss";
class Stats extends React.Component {
    constructor(){
        super();
        this.state = {
            isHovered: false
        };
        this.handleHover = this.handleHover.bind(this);
    }
    handleHover(){
        this.setState(prevState => ({
            isHovered: !prevState.isHovered
        }));
    }
    render() {
        const iconClass = `fa fa-${this.props.icon} fa-4x text-${this.props.bgClass}`;
        const stats = this.state.isHovered ? "" : "";
    return (
        <div className="stats hvr-wobble-horizontal" onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}>
        <div className='stat d-flex align-items-center mb-2'>
            <div className='statIcon'>
              <i className={iconClass} />
            </div>
            <div className='statLabel d-flex flex-column'}>
                <div className='labelHeader'>
                  {this.props.value}
                </div>
                <ProgressBar
                    variant={this.props.bgClass}
                    className="progress-sm progressSm "
                    now={this.props.progressValue}
                    key={1}
                /> 
                <div className='statDetail'>
                    <div className="label-body">
                      <i className="fa fa-arrow-circle-o-right pull-right text-muted" />
                      {this.props.text}
                    </div>
                </div>
            </div>
        </div>
        </div>
        );
    }
}
export default Stats;