{"size": 793, "ext": "js", "max_stars_repo_path": "color-generator/src/SingleColor.js", "max_stars_repo_name": "sergiosacj/React-Study-Projects", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "color-generator/src/SingleColor.js", "max_issues_repo_name": "sergiosacj/React-Study-Projects", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "color-generator/src/SingleColor.js", "max_forks_repo_name": "sergiosacj/React-Study-Projects", "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": 24.0303030303, "max_line_length": 61, "alphanum_fraction": 0.5422446406}
import React, { useState, useEffect } from "react";

const SingleColor = ({ rgb, weight, hex, index }) => {
  const [alert, setAlert] = useState(false);
  hex = `#${hex}`;

  useEffect(() => {
    const timeout = setTimeout(() => {
      setAlert(false);
    }, 1500);
    return () => {
      clearTimeout(timeout);
    };
  }, [alert]);

  return (
    <article
      className={`color ${index >= 10 && "color-light"}`}
      style={{ backgroundColor: `rgb(${rgb.join(",")})` }}
      onClick={() => {
        setAlert(true);
        navigator.clipboard.writeText(hex);
      }}
    >
      <p className="percent-value">{weight}%</p>
      <p className="color-value">{hex}</p>
      {alert && <p className="alert">copied to clipboard</p>}
    </article>
  );
};

export default SingleColor;
