VibeUI

Badge

Expiry Badge

Плашка срока, у которой вместе с тоном меняется формулировка: «ещё 21 день», «истекает через 3 дня», «истекает сегодня», «просрочено».

  • badge
  • expiry
  • deadline
  • threshold

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/badge-020

Истекает через 3 дня
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «badge-020» (Expiry Badge) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/badge-020.json

Registry item: https://vibeui.ru/r/badge-020.json
Ставится в: components/vibeui/badge-020.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Плашка срока, у которой вместе с тоном меняется формулировка: «ещё 21 день», «истекает через 3 дня», «истекает сегодня», «просрочено».

Плашка срока: пороги переключают и тон, и саму формулировку, а число дней склоняется по-русски. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Badge020 } from "@/components/vibeui/badge-020"

<Badge020 days={3} warnAt={7} />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-020-* и не подменять её токенами вашей темы
- смену формулировки, а не только тона: цвет теряется первым при печати и дальтонизме
- функцию plural с исключением для 11–14: «11 дня» читается как опечатка и подрывает доверие к числу
- отдельное состояние «сегодня»: «истекает через 0 дней» бессмысленно
- табличные цифры — иначе плашка дёргается при пересчёте срока
- собственную светлую подложку плашки: без неё тёмный текст пропадает на тёмном фоне

## 6. Можно менять
- число дней через days
- порог тревоги через warnAt
- формулировки в теле компонента
- оттенки состояний в правилах data-state

## 7. Правила
- Компонент принимает готовое число дней, а не дату: разницу считает вызывающий код, иначе сервер и клиент разойдутся в часовых поясах.
- Отрицательное значение — это просрочка: знак не теряется, из него берётся модуль для фразы.
- Порог один: если нужны «месяц», «неделя», «день», добавляйте состояния, а не растягивайте warnAt.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/badge-020.json
https://vibeui.ru/r/badge-020.json

Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-020-*. Серверный: хуков нет. Состояние выводится из числа дней и порога warnAt и попадает в data-state, который меняет только --hue и --chroma — четыре тона держатся на двух переменных. Главное здесь не цвет: для каждого состояния своя фраза, поэтому срок понятен в чёрно-белом списке и вслух в скринридере. Число склоняется функцией plural по русским правилам, включая исключение для 11–14. Часы — inline SVG под aria-hidden.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge020Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  days?: number
  warnAt?: number
}

// Идея компонента: срок, у которого меняется не только тон, но и формулировка.
// «Ещё 21 день», «истекает через 3 дня», «истекает сегодня» и «просрочено на
// 2 дня» — четыре разные фразы, поэтому состояние понятно и в чёрно-белом
// списке, и вслух в скринридере. Число склоняется по русским правилам:
// «1 день», «3 дня», «11 дней».
const STYLES = `
:where([data-vibeui-block="badge-020"]){
--vibeui-badge-020-hue:265;
--vibeui-badge-020-chroma:0.02;
--vibeui-badge-020-bg:oklch(0.97 calc(var(--vibeui-badge-020-chroma) * 0.4) var(--vibeui-badge-020-hue));
--vibeui-badge-020-fg:oklch(0.36 var(--vibeui-badge-020-chroma) var(--vibeui-badge-020-hue));
--vibeui-badge-020-border:oklch(0.89 calc(var(--vibeui-badge-020-chroma) * 0.6) var(--vibeui-badge-020-hue));
--vibeui-badge-020-mark:oklch(0.55 calc(var(--vibeui-badge-020-chroma) * 1.4) var(--vibeui-badge-020-hue));
--vibeui-badge-020-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="badge-020"]{
display:inline-flex;align-items:center;gap:0.375rem;
box-sizing:border-box;height:1.75rem;padding:0 0.6875rem;
border:1px solid var(--vibeui-badge-020-border);border-radius:9999px;
background:var(--vibeui-badge-020-bg);color:var(--vibeui-badge-020-fg);
font-family:var(--vibeui-badge-020-font);font-size:0.75rem;font-weight:600;line-height:1;
font-variant-numeric:tabular-nums;vertical-align:middle;
}
[data-vibeui-block="badge-020"][data-state="soon"]{--vibeui-badge-020-hue:75;--vibeui-badge-020-chroma:0.09}
[data-vibeui-block="badge-020"][data-state="today"]{--vibeui-badge-020-hue:50;--vibeui-badge-020-chroma:0.14}
[data-vibeui-block="badge-020"][data-state="expired"]{--vibeui-badge-020-hue:25;--vibeui-badge-020-chroma:0.16}
[data-vibeui-block="badge-020"] [data-part="icon"]{
width:0.875rem;height:0.875rem;flex:none;color:var(--vibeui-badge-020-mark);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-020"] *{animation:none!important;transition:none!important}}
`

/** Русское склонение: 1 день, 3 дня, 11 дней. */
function plural(count: number) {
  const rest100 = count % 100
  const rest10 = count % 10

  if (rest100 >= 11 && rest100 <= 14) {
    return "дней"
  }

  if (rest10 === 1) {
    return "день"
  }

  if (rest10 >= 2 && rest10 <= 4) {
    return "дня"
  }

  return "дней"
}

/**
 * Плашка срока: тон и формулировка меняются по порогу.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge020({
  days = 3,
  warnAt = 7,
  className,
  style,
  ...props
}: Badge020Props) {
  const left = Math.round(days)
  const overdue = Math.abs(left)

  const state =
    left < 0
      ? "expired"
      : left === 0
        ? "today"
        : left <= warnAt
          ? "soon"
          : "calm"

  const text =
    state === "expired"
      ? `Просрочено на ${overdue} ${plural(overdue)}`
      : state === "today"
        ? "Истекает сегодня"
        : state === "soon"
          ? `Истекает через ${left} ${plural(left)}`
          : `Ещё ${left} ${plural(left)}`

  return (
    <>
      <style href="vibeui-badge-020" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-020"
        data-state={state}
        className={className}
        style={style as CSSProperties}
      >
        <svg
          data-part="icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M12 7v5.2l3.2 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        {text}
      </span>
    </>
  )
}