edited feedback and app components added css

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "nanoid": "^4.0.2",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

src/components/App.jsx

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
+// import { SectionTitle } from './SectionTitle/SectionTitle';
 // import { Statistics } from './Statistics/Statistics';
+// import { FeedbackOptions } from './FeedbackOptions/FeedbackOptions';
+// import { Notification } from './Notification/Notification';
 
 export class App extends Component {
   state = {
@@ -8,7 +11,10 @@ export class App extends Component {
     bad: 0,
   };
 
-  countTotalFeedback = () => {};
+  countTotalFeedback = () => {
+    let total = this.state.good + this.state.neutral + this.state.bad;
+    return total;
+  };
 
   countPositiveFeedbackPercentage = () => {};
 
@@ -23,7 +29,13 @@ export class App extends Component {
           fontSize: 40,
           color: '#010101',
         }}
-      ></div>
+      >
+        {/* <SectionTitle title="Please leave feedback">
+          <FeedbackOptions />
+        </SectionTitle>
+        <Statistics />
+        <Notification message="There is no feedback" /> */}
+      </div>
     );
   }
 }

src/components/FeedbackOptions/FeedbackOptions.jsx

@@ -1,5 +1,22 @@
-// import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
+import css from './FeedbackOptions.module.css';
+import { nanoid } from 'nanoid';
 
-export const FeedbackOptions = (options, onLeaveFeedback) => {
-  return {};
+export const FeedbackOptions = ({ options, onLeaveFeedback }) => (
+  <div>
+    {options.map(option => (
+      <button
+        key={nanoid()}
+        onClick={() => onLeaveFeedback(option)}
+        className={css.feedbackBtn}
+      >
+        {option}
+      </button>
+    ))}
+  </div>
+);
+
+FeedbackOptions.propTypes = {
+  options: propTypes.arrayOf(propTypes.string).isRequired,
+  onLeaveFeedback: propTypes.func.isRequired,
 };

src/components/FeedbackOptions/FeedbackOptions.module.css

@@ -0,0 +1,13 @@
+.feedbackBtn {
+  .search-btn {
+    color: #fff;
+    padding: 5px 5px;
+    font-size: 15px;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    background: #6e6d70;
+    letter-spacing: 0.04em;
+    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

src/components/Notification/Notification.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 
 export const Notification = ({ message }) => <p>{message}</p>;
 
 Notification.propTypes = {
-  message: PropTypes.string.isRequired,
+  message: propTypes.string.isRequired,
 };

src/components/SectonTitle/SectionTitle.jsx → src/components/SectionTitle/SectionTitle.jsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 
 export const SectionTitle = ({ title, children }) => (
   <div>
@@ -8,6 +8,6 @@ export const SectionTitle = ({ title, children }) => (
 );
 
 SectionTitle.propTypes = {
-  title: PropTypes.string.isRequired,
-  children: PropTypes.string.isRequired,
+  title: propTypes.string.isRequired,
+  children: propTypes.node.isRequired,
 };