Added A Home page section for Twitter mentions

package.json

@@ -29,6 +29,7 @@
  "react-router-dom": "^6.3.0",
  "react-scripts": "5.0.0",
  "react-shimmer-effect": "^1.0.9",
+ "react-twitter-widgets": "^1.11.0",
  "redux": "^4.2.0",
  "redux-persist": "^6.0.0",
  "reselect": "^4.1.5",

src/common/home/Home.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext, useMemo,useRef, useCallback } from "react";
 import useFetch from "common/hooks/useFetch";
 import { Link } from "react-router-dom";
 import "./home.css";
@@ -14,6 +14,11 @@ import FeaturedPlays from "common/playlists/FeaturedPlays";
 import Contributors from "./Contributors";
 import ExtendedFooter from "common/footer/ExtendedFooter";
 import { SearchContext } from "common/search/search-context";
+import { Tweet } from "react-twitter-widgets";
+import Spinner from "../spinner/spinner"
+import tweetBg from "../../images/group-1825510_1280.jpg"
+
+
 
 const Home = () => {
  const [gitHubStars, setGitHubStars] = useState("...");
@@ -31,6 +36,32 @@ const Home = () => {
  });
  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
+ //* array of tweet IDs to show on the home page
+ const tweetIdArray = [
+ "1544376341172068352", 
+ "1530197614771458049",
+ "1529884210269671424",
+ "1522165831005728769",
+ "1521784126717710336",
+ "1518200201302974464",
+ "1541802575775035392",
+ "1515598358748237830",
+ "1528938773710782464",
+ "1532349503709122561"
+ ]
+
+ //* set the state for loading
+
+ const [isLoading,setLoading] = useState(true)
+
+
+
+ function tweetLoadHandler (){
+ //* as soon as tweets loads on DOM disable the loading spinner
+ setLoading(false)
+ }
+
+
  return (
  <div>
  <section className="app-home-body">
@@ -133,6 +164,28 @@ const Home = () => {
  </Link>
  </div>
  </section>
+ <section className="home-tweets">
+ <h3 className="title-primary">
+ What Our <strong>
+ <span>Community</span>
+ </strong> Says!
+ </h3>
+
+ {
+ (isLoading) ? <Spinner/> :""
+ }
+ <div className="tweets-container active" >
+ {
+
+ tweetIdArray.map(id=> {
+
+ return <Tweet key={id} tweetId={id}
+ onLoad={tweetLoadHandler} options={{width:'410' ,conversation:"none",cards:"hidden",align:"center"}} />
+ })
+ }
+ </div>
+
+ </section>
  <section className="home-contributors">
  <Contributors />
  </section>

src/common/home/home.css

@@ -373,6 +373,52 @@
  text-align: center;
 }
 
+/* Tweet section */
+
+.home-tweets{
+ position: relative;
+ min-height: 10em;
+ background-color: var(--color-neutral-20);
+ overflow: hidden;
+}
+.home-tweets .title-primary{
+ text-align: center;
+ margin-top: 1.5rem !important;
+
+
+}
+
+
+.tweets-container.active{
+
+ width: 90.5%;
+ margin: 0 auto;
+ margin-top: 4.5em;
+ display: flex;
+ /* grid-template-columns: repeat(auto-fit,370px);
+ grid-template-rows: repeat(auto-fill,400px);
+ grid-auto-rows:auto;
+ grid-auto-columns: auto;
+ grid-row-gap:1em; */
+ justify-content: center;
+ align-items:center;
+ /* row-gap: 1.3em; */
+ flex-wrap: wrap;
+ gap: 1em;
+ margin-bottom: 2em;
+}
+
+.tweets-container > div{
+
+ /* height: fit-content; */
+ width: clamp(5em,320px,44em);
+ /* max-width: 410px; */
+ filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.097));
+
+
+}
+
+
 
 /* Home Contributors */
 .home-contributors {
@@ -381,7 +427,7 @@
  background-color: var(--color-neutral-10);
 }
 
-.home-contributors .title-primary {
+:is(.home-contributors,.home-tweets) .title-primary {
  position: relative;
  margin: 0 0 3rem 0;
  font-family: var(--ff-accent);
@@ -391,17 +437,17 @@
  line-height: 1.2;
 }
 
-.home-contributors .title-primary strong {
+:is(.home-contributors,.home-tweets) .title-primary strong {
  position: relative;
  font-family: var(--ff-accent);
  position: relative;
 }
-.home-contributors .title-primary strong span {
+:is(.home-contributors,.home-tweets) .title-primary strong span {
  position: relative;
  font-family: var(--ff-accent);
 }
 
-.home-contributors .title-primary strong:before {
+:is(.home-contributors,.home-tweets) .title-primary strong:before {
  content:"";
  position: absolute;
  height: 4px;