demountable

Back Back Up Advanced Editor

import { Container, Label, Badge } from '@bsf/force-ui';
import { cn } from '@Functions/utils';

export const QuickLink = ( { link } ) => (
	<Container.Item
		className={ cn(
			'md:w-full lg:w-full flex cursor-pointer hover:shadow-md',
			link?.disabled && 'cursor-not-allowed'
		) }
		onClick={ () => {
			if ( ! link?.disabled && link?.link ) {
				window.open(
					surerank_globals.wp_dashboard_url +
						'?page=surerank_settings#' +
						link.link,
					'_self'
				);
			}
		} }
	>
		<Container
			className={ cn(
				'flex-1 gap-1 shadow-sm p-2 rounded-md bg-background-primary',
				link?.disabled && 'pointer-events-none shadow-none'
			) }
			containerType="flex"
			direction="column"
		>
			<Container.Item
				className={ cn(
					'inline-flex p-1 text-icon-primary',
					link?.disabled &&
						'text-icon-on-color-disabled justify-between'
				) }
			>
				<link.icon className="size-5" />

{ link.badge && (
					<Badge size="xss" variant="green" label={ link.badge } />
				) }
			</Container.Item>
			<Container.Item className="space-y-0.5 p-1">
				<Label
					className={ cn(
						'text-sm font-medium cursor-pointer',
						link?.disabled && 'text-text-tertiary'
					) }
				>
					{ link.label }
				</Label>
				<Label className="text-sm font-normal text-text-tertiary cursor-pointer">
					{ link.description }
				</Label>
			</Container.Item>
		</Container>
	</Container.Item>
);