Indicator

Indicator to indicate a status of a component.

content

'use client'

import { Indicator, IndicatorItem } from '@nerdfish/ui'

export function IndicatorExample() {
	return (
		<Indicator>
			<IndicatorItem>
				<div className="size-4 rounded-full bg-pink-500" />
			</IndicatorItem>
			<div className="bg-background-muted grid size-32 place-items-center">
				content
			</div>
		</Indicator>
	)
}

Usage

import { Indicator, IndicatorItem, Badge } from '@nerdfish/ui'

<Indicator>
	<IndicatorItem>
		<Badge variant="secondary" />
	</IndicatorItem>
	<div className="bg-foreground text-background grid h-32 w-32 place-items-center">
		content
	</div>
</Indicator>

Item

99+

content

'use client'

import { Badge, Indicator, IndicatorItem } from '@nerdfish/ui'

export function IndicatorItemExample() {
	return (
		<Indicator>
			<IndicatorItem>
				<Badge>99+</Badge>
			</IndicatorItem>
			<div className="bg-background-muted grid size-32 place-items-center">
				content
			</div>
		</Indicator>
	)
}

Positions

top left

top center

top right

middle left

middle center

middle right

bottom left

bottom center

bottom right

content

'use client'

import { Badge, Indicator, IndicatorItem } from '@nerdfish/ui'

export function IndicatorPositionsExample() {
	return (
		<Indicator>
			<IndicatorItem top left>
				<Badge>top left</Badge>
			</IndicatorItem>
			<IndicatorItem top center>
				<Badge>top center</Badge>
			</IndicatorItem>
			<IndicatorItem top right>
				<Badge>top right</Badge>
			</IndicatorItem>
			<IndicatorItem middle left>
				<Badge>middle left</Badge>
			</IndicatorItem>
			<IndicatorItem middle center>
				<Badge>middle center</Badge>
			</IndicatorItem>
			<IndicatorItem middle right>
				<Badge>middle right</Badge>
			</IndicatorItem>
			<IndicatorItem bottom left>
				<Badge>bottom left</Badge>
			</IndicatorItem>
			<IndicatorItem bottom center>
				<Badge>bottom center</Badge>
			</IndicatorItem>
			<IndicatorItem bottom right>
				<Badge>bottom right</Badge>
			</IndicatorItem>
			<div className="bg-background-muted grid size-64 place-items-center">
				content
			</div>
		</Indicator>
	)
}