portainer/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx

45 lines
1004 B
TypeScript

import { PropsWithChildren } from 'react';
import clsx from 'clsx';
import { Briefcase } from 'lucide-react';
import './BEFeatureIndicator.css';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { Icon } from '@@/Icon';
import { getFeatureDetails } from './utils';
export interface Props {
featureId?: FeatureId;
showIcon?: boolean;
className?: string;
}
export function BEFeatureIndicator({
featureId,
children,
showIcon = true,
className = '',
}: PropsWithChildren<Props>) {
const { url, limitedToBE } = getFeatureDetails(featureId);
if (!limitedToBE) {
return null;
}
return (
<a
className={clsx('be-indicator vertical-center', className)}
href={url}
target="_blank"
rel="noopener noreferrer"
>
{children}
{showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
<span className="be-indicator-label break-words">
Business Edition Feature
</span>
</a>
);
}