From b733ea5960feb9a70f7335dc5320ed7b914633df Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:51:53 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20HeaderFilter=20com?=
 =?UTF-8?q?ponent=20=F0=9F=93=A6=20Added=20HeaderFilter=20component=20?=
 =?UTF-8?q?=E2=9C=A8=20Created=20HeaderFilter=20module=20=F0=9F=8E=89=20In?=
 =?UTF-8?q?itial=20HeaderFilter=20component=20=F0=9F=9B=A0=EF=B8=8F=20Refa?=
 =?UTF-8?q?ctored=20HeaderFilter=20code=20=F0=9F=93=84=20Documented=20Head?=
 =?UTF-8?q?erFilter=20component=20=F0=9F=9A=A7=20Work=20in=20progress=20on?=
 =?UTF-8?q?=20HeaderFilter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderFilter.tsx | 67 +++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/HeaderFilter.tsx

diff --git a/src/components/HeaderFilter.tsx b/src/components/HeaderFilter.tsx
new file mode 100644
index 0000000..ea1e866
--- /dev/null
+++ b/src/components/HeaderFilter.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import React, { FC, useEffect, useState, ReactNode } from "react";
+import Heading from "@/shared/Heading";
+import Nav from "@/shared/Nav";
+import NavItem from "@/shared/NavItem";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+
+export interface HeaderFilterProps {
+  tabActive: string;
+  tabs: string[];
+  heading: ReactNode;
+  subHeading?: ReactNode;
+  onClickTab?: (item: string) => void;
+}
+
+const HeaderFilter: FC<HeaderFilterProps> = ({
+  tabActive,
+  tabs,
+  subHeading = "",
+  heading = "Latest Articles 🎈",
+  onClickTab = () => {},
+}) => {
+  const [tabActiveState, setTabActiveState] = useState(tabActive);
+
+  useEffect(() => {
+    setTabActiveState(tabActive);
+  }, [tabActive]);
+
+  const handleClickTab = (item: string) => {
+    onClickTab(item);
+    setTabActiveState(item);
+  };
+
+  return (
+    <div className="flex flex-col mb-8 relative">
+      <Heading desc={subHeading}>{heading}</Heading>
+      <div className="flex items-center justify-between">
+        <Nav
+          className="sm:space-x-2"
+          containerClassName="relative flex w-full overflow-x-auto text-sm md:text-base hiddenScrollbar"
+        >
+          {tabs.map((item, index) => (
+            <NavItem
+              key={index}
+              isActive={tabActiveState === item}
+              onClick={() => handleClickTab(item)}
+            >
+              {item}
+            </NavItem>
+          ))}
+        </Nav>
+        <span className="hidden sm:block flex-shrink-0">
+          <ButtonSecondary href="/listing-stay" className="!leading-none">
+            <div className="flex items-center justify-center">
+              <span>View all</span>
+              <ArrowRightIcon className="w-5 h-5 ml-3" />
+            </div>
+          </ButtonSecondary>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderFilter;