From 905c95b0eaf86d1b937f35278b7a92bb57b3fb02 Mon Sep 17 00:00:00 2001
From: AOA19 <aakinyemi19@gmail.com>
Date: Wed, 8 Jan 2025 19:11:09 -0500
Subject: [PATCH] #39 - Added a add review btn component to home and company
 page. Added more props to Company banner component

---
 src/components/AddReviewBtn/AddReviewBtn.jsx  | 12 +++++++++++
 src/components/AddReviewBtn/addReviewBtn.css  | 20 +++++++++++++++++++
 .../CompanyBanner/CompanyBanner.jsx           | 16 ++++++++++-----
 src/components/LeftSidebar/LeftSidebar.jsx    |  5 ++---
 src/pages/Company/Company.jsx                 | 10 +++++++---
 5 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/components/AddReviewBtn/AddReviewBtn.jsx
 create mode 100644 src/components/AddReviewBtn/addReviewBtn.css

diff --git a/src/components/AddReviewBtn/AddReviewBtn.jsx b/src/components/AddReviewBtn/AddReviewBtn.jsx
new file mode 100644
index 0000000..fab3608
--- /dev/null
+++ b/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
diff --git a/src/components/AddReviewBtn/addReviewBtn.css b/src/components/AddReviewBtn/addReviewBtn.css
new file mode 100644
index 0000000..15e41ba
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/CompanyBanner/CompanyBanner.jsx b/src/components/CompanyBanner/CompanyBanner.jsx
index 108a1c4..a49bb21 100644
--- a/src/components/CompanyBanner/CompanyBanner.jsx
+++ b/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>
     )
 }
diff --git a/src/components/LeftSidebar/LeftSidebar.jsx b/src/components/LeftSidebar/LeftSidebar.jsx
index 3148bc1..d1704f8 100644
--- a/src/components/LeftSidebar/LeftSidebar.jsx
+++ b/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">
diff --git a/src/pages/Company/Company.jsx b/src/pages/Company/Company.jsx
index 9c429de..f5462e7 100644
--- a/src/pages/Company/Company.jsx
+++ b/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>
     )