<repo_name>anwesh-sarkar/m4-4-react--effects<file_sep>/src/hooks/useKeydown.hook.js
import React from "react";

const useKeydown = (code, callback) => {
  let handleKeyDown = (event) => {
    if (event.code === code) {
      callback();
    }
  };
  React.useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  });
};

export default useKeydown;
<file_sep>/src/components/Item.js
import React from "react";
import styled from "styled-components";

const Item = ({ name, cost, value, isFirst, numOwned, handleClick }) => {
  const itemRef = React.useRef(null);
  React.useEffect(() => {
    if (isFirst) {
      itemRef.current.focus();
    }
  }, []);

  return (
    <Wrapper onClick={handleClick} ref={itemRef}>
      <div>
        <Name>{name}</Name>
        <ItemBuy>
          Cost: {cost} cookies. Produces {value} cookies/second.
        </ItemBuy>
      </div>
      <NumOwned>{numOwned}</NumOwned>
    </Wrapper>
  );
};

const Wrapper = styled.button`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  padding: 10px 0;
  width: 500px;
  background: transparent;
  border: none;
  border-bottom-style: solid;
  color: white;
`;
const Name = styled.h2`
  font-size: 2em;
`;
const ItemBuy = styled.p`
  font-size: 1.2em;
  padding-right: 10px;
  color: lightgray;
`;
const NumOwned = styled.div`
  font-size: 3em;
`;

export default Item;
