feat: complete Explore page with ExploreTabContent component and optimize TrendingItem component by adding id display and removing outline on PopoverButton

Author: CemWebDev

src/assets/sports-1.jpg

@@ -0,0 +1,65 @@
+import PropTypes from "prop-types";
+import TrendingItem from "./TrendingItem";
+
+const ExploreTabContent = ({
+  isActive,
+  isFeatured,
+  img,
+  tabTitle,
+  featuredTitle,
+  featuredSubTitle,
+  data,
+}) => {
+  return (
+    isActive && (
+      <section>
+        {tabTitle && (
+          <h1 className="text-white text-xl font-semibold p-2">{tabTitle}</h1>
+        )}
+        {isFeatured && (
+          <div className="relative">
+            <img
+              src={img}
+              alt="Explore Page Tab Hero"
+              className="relative w-full h-[200px] sm:h-[300px] lg:h-[400px] object-cover"
+            />
+            <div className="absolute bottom-4 left-5 text-xl text-white">
+              <h1 className="font-semibold">{featuredTitle}</h1>
+              <h1> {featuredSubTitle} </h1>
+            </div>
+          </div>
+        )}
+        <nav className="my-4">
+          {data.map((topic) => (
+            <TrendingItem
+              key={topic.id}
+              id={topic.id}
+              title={topic.title}
+              category={topic.category}
+              posts={topic.posts}
+            />
+          ))}
+        </nav>
+      </section>
+    )
+  );
+};
+
+ExploreTabContent.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  isFeatured: PropTypes.bool,
+  img: PropTypes.string,
+  tabTitle: PropTypes.string,
+  featuredTitle: PropTypes.string,
+  featuredSubTitle: PropTypes.string,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      category: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      posts: PropTypes.number.isRequired,
+    })
+  ),
+};
+
+export default ExploreTabContent;

src/components/UI/ExploreTabContent.jsx

@@ -3,14 +3,15 @@ import { numberFormat } from "../../utils/format";
 import { Popover, PopoverPanel, PopoverButton } from "@headlessui/react";
 import { PiDotsThreeCircle, PiSmileySadThin } from "react-icons/pi";
 
-const TrendingItem = ({ title, category, posts }) => {
+const TrendingItem = ({ title, category, posts, id }) => {
   return (
-    <div>
+    <>
       <button className="w-full flex items-start justify-between px-4 py-2 hover:bg-[--hover] transition-colors">
         <div className="flex flex-col items-start">
-          <span className="text-xs text-[color:var(--text-color-secondary)]">
-            {category}
-          </span>
+          <div className="text-xs text-[color:var(--text-color-secondary)] flex items-center gap-1">
+            {id && <span>{id} ·</span>}
+            <span className="">{category}</span>
+          </div>
           <span className="text-sm font-semibold text-[color:var(--text-color)]">
             #{title}
           </span>
@@ -19,7 +20,7 @@ const TrendingItem = ({ title, category, posts }) => {
           </span>
         </div>
         <Popover className="relative text-[color:var(--text-color)]">
-          <PopoverButton>
+          <PopoverButton className="focus:outline-none">
             <PiDotsThreeCircle className="text-xl hover:text-[color:var(--color-primary)] transition-colors" />
           </PopoverButton>
           <PopoverPanel className="absolute bg-[color:var(--background-primary)] top-0 z-40 right-0 min-w-[300px] shadow-box rounded-xl ">
@@ -34,14 +35,15 @@ const TrendingItem = ({ title, category, posts }) => {
           </PopoverPanel>
         </Popover>
       </button>
-    </div>
+    </>
   );
 };
 
 TrendingItem.propTypes = {
   title: PropTypes.string.isRequired,
   category: PropTypes.string.isRequired,
   posts: PropTypes.number.isRequired,
+  id: PropTypes.number,
 };
 
 export default TrendingItem;

src/components/UI/TrendingItem.jsx

@@ -0,0 +1,21 @@
+import { useTab } from "../../store/tabs/hooks";
+import { entertainmentTrends } from "../../constant";
+import trends from "../../assets/trends-1.jpg";
+import ExploreTabContent from "../UI/ExploreTabContent";
+
+const Entertainment = () => {
+  const { activeTab } = useTab("explore");
+
+  return (
+    <ExploreTabContent
+      isActive={activeTab === "entertainment"}
+      isFeatured={true}
+      img={trends}
+      featuredTitle="Festival"
+      featuredSubTitle="Music Festival &bull; LIVE"
+      data={entertainmentTrends}
+    />
+  );
+};
+
+export default Entertainment;

src/components/explore/Entertainment.jsx

@@ -1,37 +1,18 @@
 import { useTab } from "../../store/tabs/hooks";
 import { trendsForYou } from "../../constant";
-import TrendingItem from "../UI/TrendingItem";
 import trends from "../../assets/trends-1.jpg";
+import ExploreTabContent from "../UI/ExploreTabContent";
 const ForYou = () => {
   const { activeTab } = useTab("explore");
-
   return (
-    activeTab === "for-you" && (
-      <section>
-        <div className="relative">
-          <img
-            src={trends}
-            alt="Trends Event"
-            className="relative -z-10 w-full"
-          />
-          <div className="absolute bottom-4 left-5 text-xl text-white">
-            <h1 className="font-semibold">Festival</h1>
-            <h1>Music Festival &bull; LIVE</h1>
-          </div>
-        </div>
-        <h1 className="text-[--text-color] font-semibold text-lg p-2">
-          Trends for you
-        </h1>
-        {trendsForYou.map((topic) => (
-          <TrendingItem
-            key={topic.id}
-            title={topic.title}
-            category={topic.category}
-            posts={topic.posts}
-          />
-        ))}
-      </section>
-    )
+    <ExploreTabContent
+      isActive={activeTab === "for-you"}
+      isFeatured={true}
+      img={trends}
+      featuredTitle="Festival"
+      featuredSubTitle="Music Festival &bull; LIVE"
+      data={trendsForYou}
+    />
   );
 };
 

src/components/explore/ForYou.jsx

@@ -0,0 +1,16 @@
+import { useTab } from "../../store/tabs/hooks";
+import { newsTrends } from "../../constant";
+import ExploreTabContent from "../UI/ExploreTabContent";
+
+const News = () => {
+  const { activeTab } = useTab("explore");
+  return (
+    <ExploreTabContent
+      isActive={activeTab === "news"}
+      isFeatured={false}
+      data={newsTrends}
+    />
+  );
+};
+
+export default News;

src/components/explore/News.jsx

@@ -0,0 +1,21 @@
+import { useTab } from "../../store/tabs/hooks";
+import { globalSportsTrends } from "../../constant";
+import sports from "../../assets/sports-1.jpg";
+import ExploreTabContent from "../UI/ExploreTabContent";
+
+const ForYou = () => {
+  const { activeTab } = useTab("explore");
+
+  return (
+    <ExploreTabContent
+      isActive={activeTab === "sports"}
+      isFeatured={true}
+      img={sports}
+      featuredTitle="Badminton World Championship 2024"
+      featuredSubTitle="August 15 &bull; 2024"
+      data={globalSportsTrends}
+    />
+  );
+};
+
+export default ForYou;

src/components/explore/Sports.jsx

@@ -0,0 +1,18 @@
+import { exploreTrending } from "../../constant";
+import { useTab } from "../../store/tabs/hooks";
+import ExploreTabContent from "../UI/ExploreTabContent";
+
+const Trending = () => {
+  const { activeTab } = useTab("explore");
+  return (
+    <div>
+      <ExploreTabContent
+        isActive={activeTab === "trending"}
+        tabTitle="Turkey Trends"
+        data={exploreTrending}
+      />
+    </div>
+  );
+};
+
+export default Trending;