{"size": 1745, "ext": "js", "max_stars_repo_path": "resources/js/src/components/Backend/Dashboard/Card/Card.js", "max_stars_repo_name": "marvinboris/vigilant-garbanzo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/js/src/components/Backend/Dashboard/Card/Card.js", "max_issues_repo_name": "marvinboris/vigilant-garbanzo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/js/src/components/Backend/Dashboard/Card/Card.js", "max_forks_repo_name": "marvinboris/vigilant-garbanzo", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 56.2903225806, "max_line_length": 228, "alphanum_fraction": 0.5232091691}
import React from 'react';
import { Col, Row } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const card = ({ title, titleColor = 'white', details, children, link, light = false, icon, color, circleBorder = 'orange', circleColor = 'white' }) => {
    return (
        <Col xs={12} md={12} lg={6} xl={3} className="pb-3">
            <Col xs={12} className={`h-100 rounded overflow-hidden position-relative bg-${color}`}>
                <Row>
                    <Col xs={12} className="py-3 border-bottom border-show position-relative">
                        <span className={`text-large text-700 text-${titleColor}`}>{title}</span>

                        {/* <div className={`rounded-circle position-absolute bg-${color} border border-2 border-${circleBorder}`} style={{ width: 20, height: 20, bottom: 0, left: 16, transform: 'translateY(50%)', padding: 2 }}>
                            <div className={`rounded-circle w-100 h-100 bg-${circleColor}`} />
                        </div> */}
                    </Col>

                    <Col xs={12} className="py-3 pl-5 position-relative">
                        <span style={{ zIndex: 0, top: 16, right: 16 }} className="position-absolute">
                            <FontAwesomeIcon icon={icon} style={{ zIndex: 0 }} className={`text-${light ? "black" : "white"}-20`} size="4x" />
                        </span>
                        <h1 style={{ zIndex: 10 }} className="text-white text-montserrat text-700">{children}</h1>
                        <div style={{ zIndex: 10 }} className="text-white text-300">{details}</div>
                    </Col>
                </Row>
            </Col>
        </Col>
    );
};

export default card;