+ {/* Filter Button */}
+
+ );
+};
+
+export default FilterSortBar;
diff --git a/src/components/common/SearchBar.tsx b/src/components/common/SearchBar.tsx
new file mode 100644
index 0000000..e922b59
--- /dev/null
+++ b/src/components/common/SearchBar.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Search } from "lucide-react";
+
+interface SearchBarProps {
+ onSearch: (query: string) => void;
+}
+
+const SearchBar: React.FC
+
+
+ {/* Filter Dropdown */}
+ {openMenu === "filter" && (
+
+
+ {/* Sort Button */}
+
+ {["Newest", "Oldest", "Popular"].map((filter) => (
+
+ )}
+ { + onFilterChange(filter); + setOpenMenu(null); + }} + > + {filter} +
+ ))} +
+
+
+ {/* Sort Dropdown */}
+ {openMenu === "sort" && (
+
+
+ {["A–Z", "Z–A", "By Date"].map((sort) => (
+
+ )}
+ { + onSortChange(sort); + setOpenMenu(null); + }} + > + {sort} +
+ ))} +
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/components/common/StatItems.tsx b/src/components/common/StatItems.tsx
new file mode 100644
index 0000000..bcff502
--- /dev/null
+++ b/src/components/common/StatItems.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface StatItemProps {
+ icon: React.ReactNode;
+ label: string;
+ value: number;
+}
+
+const StatItem: React.FC
+
+
+
+
+ {icon}
+
+ {value} {label}
+
+
+ );
+};
+
+export default StatItem;
diff --git a/src/components/common/TopicsCard.tsx b/src/components/common/TopicsCard.tsx
new file mode 100644
index 0000000..4de9176
--- /dev/null
+++ b/src/components/common/TopicsCard.tsx
@@ -0,0 +1,71 @@
+import { Clock } from "lucide-react";
+import StatItem from "./StatItems";
+
+interface Stat {
+ icon: React.ReactNode;
+ label: string;
+ value: number;
+}
+
+interface TopicsCardProps {
+ title: string;
+ description: string;
+ duration: string;
+ imageUrl: string;
+ stats: Stat[];
+}
+
+
+const TopicsCard: React.FC
+ {/* Image Section */}
+ 
+
+ {/* Content Section */}
+
+ );
+};
+
+export default TopicsCard;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 5a14453..a77d560 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,22 +1,32 @@
+"use client"
import { HEADER_ITEMS } from "@/constants";
import { MenuIcon } from "lucide-react";
import Link from "next/link";
+import { usePathname } from "next/navigation";
+
const Header = () => {
+ const pathname = usePathname();
return (
+
+
+ {/* Title */}
+
+ {title}
+
+
+ {/* Duration */}
+
+
+ {/* Description */}
+
+
+ + {description} +
+ + {/* Stats Row */} +
+ {stats.map((item, index) => (
+
+
+ {/* Button */}
+
+