homarr/packages/ui/src/components/select-with-description-and-badge.tsx

"use client";

import type { MantineColor } from "@mantine/core";
import { Badge, Group, Text } from "@mantine/core";

import type { SelectWithCustomItemsProps } from "./select-with-custom-items";
import { SelectWithCustomItems } from "./select-with-custom-items";

export interface SelectItemWithDescriptionBadge {
  value: string;
  label: string;
  badge?: { label: string; color: MantineColor };
  description: string;
}
type Props = SelectWithCustomItemsProps<SelectItemWithDescriptionBadge>;

export const SelectWithDescriptionBadge = (props: Props) => {
  return <SelectWithCustomItems<SelectItemWithDescriptionBadge> {...props} SelectOption={SelectOption} />;
};

const SelectOption = ({ label, description, badge }: SelectItemWithDescriptionBadge) => {
  return (
    <Group justify="space-between">
      <div>
        <Text fz="sm" fw={500}>
          {label}
        </Text>
        <Text fz="xs" opacity={0.6}>
          {description}
        </Text>
      </div>

      {badge && (
        <Badge color={badge.color} variant="outline" size="sm">
          {badge.label}
        </Badge>
      )}
    </Group>
  );
};