30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { type FC } from "react";
|
|
import { useBarItems } from "@/hooks/barItems";
|
|
import { Link } from "react-router";
|
|
|
|
const TopBar: FC = () => {
|
|
const [barItems, isActive] = useBarItems();
|
|
|
|
return (
|
|
<div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70">
|
|
{barItems
|
|
.filter((item) => item.type !== "delimiter")
|
|
.map((item) => (
|
|
<Link to={item.pathname} key={item.tab}>
|
|
<div
|
|
className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
|
|
isActive(item)
|
|
? " border-b-4 border-b-blue-500 text-blue-500"
|
|
: " border-b-transparent text-gray-500"
|
|
}`}
|
|
>
|
|
{item.title}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopBar;
|