{"size": 768, "ext": "js", "max_stars_repo_path": "resources/react/components/Anchor/index.js", "max_stars_repo_name": "franpax95/boostedv2", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/react/components/Anchor/index.js", "max_issues_repo_name": "franpax95/boostedv2", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/react/components/Anchor/index.js", "max_forks_repo_name": "franpax95/boostedv2", "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": 27.4285714286, "max_line_length": 115, "alphanum_fraction": 0.5572916667}
import React from 'react';
import { StyledAnimatedRowLink, StyledPrimaryLink } from './style';
import { BsArrowDownRight } from 'react-icons/bs';

/**
 * Link with Primary Styles
 */
export const PrimaryLink = ({ to = "/", children }) => <StyledPrimaryLink to={to}>{ children }</StyledPrimaryLink>;

/**
 * Animated Link with Hover Effect
 */
export const AnimatedRowLink = ({ to = "/", onClick, children }) => {
    return (
        <StyledAnimatedRowLink to={to} onClick={onClick}>
            <div className="front">
                { children }
            </div>

            <div className="back">
                <div className="icon">
                    <BsArrowDownRight />
                </div>
            </div>
        </StyledAnimatedRowLink>
    );
}
