40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { cn } from "../utils";
|
|
import type { TTabNavigationItemProps } from "./tab-navigation-types";
|
|
|
|
export function TabNavigationItem({ children, isActive, className }: TTabNavigationItemProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
|
|
isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
|
|
className
|
|
)}
|
|
>
|
|
<AnimatePresence>
|
|
{isActive && (
|
|
<motion.div
|
|
className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
transition={{
|
|
duration: 0.3,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
}}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TabNavigationItem.displayName = "TabNavigationItem";
|