#39 - Added a add review btn component to home and company page. Adde…

…d more props to Company banner component

src/components/AddReviewBtn/AddReviewBtn.jsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router'
+import './addReviewBtn.css'
+
+const AddReviewBtn = () => {
+    return (
+        <Link className="review-btn" to="/review">
+            Add a Review
+        </Link>
+    )
+}
+
+export default AddReviewBtn

src/components/AddReviewBtn/addReviewBtn.css

@@ -0,0 +1,20 @@
+/* Buttons */
+.review-btn {
+    border: none;
+    text-decoration: none;
+    padding: 1rem;
+    font-size: 1.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.2s;
+    font-family: inherit;
+    background-color: #413f9f;
+    color: white;
+    border-radius: 4px;
+}
+
+.review-btn:hover,
+.review-btn:active {
+    background-color: #282763;
+}

src/components/CompanyBanner/CompanyBanner.jsx

@@ -1,11 +1,17 @@
 import './companyBanner.css'
+import AddReviewBtn from '../AddReviewBtn/AddReviewBtn'
 
 const CompanyBanner = (props) => {
+    console.log(props)
     return (
         <section className="company-info">
-            <div className="company-logo">Company Logo</div>
-            <h1 className="company-name">{props.companyName}</h1>
-            <nav className="company-tabs">
+            <img
+                alt={`${props.name} Logo`}
+                src={`/img${props.companyLogo} `}
+                className="company-logo"
+            />
+            <h1 className="company-name">{props.name}</h1>
+            {/* <nav className="company-tabs">
                 <a href="#overview" className="tab">
                     Overview
                 </a>
@@ -15,8 +21,8 @@ const CompanyBanner = (props) => {
                 <a href="#salaries" className="tab">
                     Salaries
                 </a>
-            </nav>
-            <button className="btn action-btn">Review This Company</button>
+            </nav> */}
+            <AddReviewBtn/>
         </section>
     )
 }

src/components/LeftSidebar/LeftSidebar.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import './leftSidebar.css'
+import AddReviewBtn from '../AddReviewBtn/AddReviewBtn'
 
 export default function LeftSidebar() {
     const [favoriteCompanies, setFavoriteCompanies] = useState([])
@@ -21,9 +22,7 @@ export default function LeftSidebar() {
 
     return (
         <aside className="left-sidebar">
-            <a href="/review" className="action-btn add-review">
-                Add Review
-            </a>
+          <AddReviewBtn/>
             <section className="favorite-companies">
                 <h3>Favorite Companies</h3>
                 <ul className="favorite-list">

src/pages/Company/Company.jsx

@@ -3,11 +3,13 @@ import './company.css'
 import CompanyBanner from '../../components/CompanyBanner/CompanyBanner.jsx'
 import CompanyOverview from '../../components/CompanyOverview/CompanyOverview.jsx'
 import CompanyReviewSummary from '../../components/CompanyReviewSummary/CompanyReviewSummary.jsx'
-import CompanySalaries from '../../components/CompanySalaries/CompanySalaries.jsx'
+// import CompanySalaries from '../../components/CompanySalaries/CompanySalaries.jsx'
 import { useState, useEffect } from 'react'
 
 const Company = () => {
     const [company, setCompany] = useState([])
+
+
     let params = useParams()
     console.log({ params })
 
@@ -29,14 +31,16 @@ const Company = () => {
         fetchCompany()
     }, [params.id])
 
+
+
     console.log(company)
     return (
         <main className="company-container">
-            <CompanyBanner companyName={company.name} />
+            <CompanyBanner {...company} />
             <section className="content">
                 <CompanyOverview {...company} />
                 <CompanyReviewSummary {...company} />
-                <CompanySalaries />
+                {/* <CompanySalaries /> */}
             </section>
         </main>
     )