{"size": 1397, "ext": "js", "max_stars_repo_path": "src/Components/Blog.js", "max_stars_repo_name": "OOO-OReilly/Reillydev-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Components/Blog.js", "max_issues_repo_name": "OOO-OReilly/Reillydev-website", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/Blog.js", "max_forks_repo_name": "OOO-OReilly/Reillydev-website", "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": 29.1041666667, "max_line_length": 77, "alphanum_fraction": 0.5261274159}
import React from 'react';
import '../CSS Components/Blog.css';
import { useTheme } from '../contexts/ThemeContext';
import Satellite from '../Assets/Icons/Comet.svg';

export default function Skills() {
  const { darkMode } = useTheme();

  const Card = (props) => {
    return (
      <a href={props.link} rel="noreferrer" target="_blank">
        <div className="card-container">
          <span className="headline">NEW ARTICLE</span>
          <h2 className="article-title">{props.title}</h2>
          <span className="article-length">{props.length} MIN</span>
        </div>
      </a>
    );
  };

  return (
    <>
      <section id="blog">
        <div className="portfolio-container">
          <div className={darkMode ? 'blog-header' : 'blog-header-light'}>
            <img alt="satellite" src={Satellite} />
            <h1>Recent Writings</h1>
          </div>
          <div className="row-cards">
            <Card
              link="https://blog.reilly.dev/react-essentials-props"
              title="React Essentials: Props"
              length="3"
            />
          </div>
          <a target="_blank" rel="noreferrer" href="https://blog.reilly.dev">
            <div
              className={darkMode ? 'blog-button' : 'blog-button blog-light'}
            >
              Visit Blog
            </div>
          </a>
        </div>
      </section>
    </>
  );
}
