Browse Source

🚀 Implemented HeaderFilter component

📦 Added HeaderFilter component
 Created HeaderFilter module
🎉 Initial HeaderFilter component
🛠️ Refactored HeaderFilter code
📄 Documented HeaderFilter component
🚧 Work in progress on HeaderFilter
main
John Doe 1 year ago
parent
commit
b733ea5960
  1. 67
      src/components/HeaderFilter.tsx

67
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;
Loading…
Cancel
Save