VibeUI

Calendar

Deadline Countdown

Карточка дедлайна: остаток словами вместо тикающего таймера, кольцо сгоревшего срока и дата сдачи с человекочитаемой подписью.

  • calendar
  • deadline
  • countdown
  • progress

Превью

1440pxHost theme

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

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

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

Сдача макетов

Осталось 18 дней 8 часов

Срок:

Показать полную инструкцию

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

# Установка и размещение «calendar-020» (Deadline Countdown) из VibeUI

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

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

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

## 2. Что это
Карточка дедлайна: остаток словами вместо тикающего таймера, кольцо сгоревшего срока и дата сдачи с человекочитаемой подписью.

Дедлайн-карточка: остаток словами со склонением, кольцо сгоревшего срока и три тона состояния. Серверный, один файл, ноль зависимостей.

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

<Calendar020
  deadline="2026-04-01T18:00"
  now="2026-03-14T09:30"
  startedAt="2026-02-20T10:00"
  heading="Сдача макетов"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-calendar-020-* — с токенами темы карточка перестаёт совпадать с превью
- опорное время пропсом now строкой: new Date() в рендере разводит сервер и клиент и роняет гидрацию
- остаток словами вместо тикающего таймера: секунды на сроке в неделях бесполезны и требуют клиентского кода
- русское склонение в подписи: «5 дней» и «2 дня» — разные формы, «5 день» читается как опечатка
- маску кольца на отдельном слое: кружок-заглушка обязан совпасть с фоном, а маска работает на любой подложке
- смену тона и формулировки после срока: просроченная задача не должна выглядеть как обычная

## 6. Можно менять
- срок через deadline, опорное время через now и старт отсчёта через startedAt
- название задачи через heading
- язык даты через locale
- цвет спокойного состояния через accent

## 7. Правила
- Строки времени без часового пояса разбираются как локальные: если сервер и браузер в разных зонах, показывайте только дату.
- Кольцо считает долю от startedAt до deadline, поэтому без осмысленного старта процент будет бессмысленным.
- Порог тревожного тона зашит в трое суток: это осознанный выбор, а не пропс — менять его нужно в коде.
- После срока кольцо остаётся на ста процентах и не растёт дальше: величину просрочки показывает подпись, а не кольцо.

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

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

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

Серверный компонент: и дедлайн, и опорное «сейчас» приходят строками, поэтому рендер детерминирован и гидрация не расходится — new Date() в разметке был бы ошибкой. Остаток переводится в слова с русским склонением: для срока в неделях секунды бесполезны, а тикающий таймер требует клиента. Кольцо показывает долю сгоревшего срока от startedAt до deadline: процент пугает точнее, чем оставшиеся дни сами по себе. Дырку в кольце делает маска на отдельном слое, а не кружок-заглушка: заглушка обязана совпасть с фоном карточки, а маска работает на любой подложке и не съедает подпись сверху. Тон переключается атрибутом data-tone: за трое суток до срока карточка желтеет, после срока краснеет и меняет формулировку на «просрочено».

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Calendar020Props = Omit<
  ComponentPropsWithoutRef<"article">,
  "children" | "title"
> & {
  /** Дедлайн строкой без часового пояса: 2026-04-01T18:00. */
  deadline?: string
  /** Опорный «сейчас» строкой: сервер и клиент обязаны посчитать одинаково. */
  now?: string
  startedAt?: string
  heading?: string
  locale?: string
  accent?: string
}

// Идея компонента: остаток до дедлайна словами, а не таймером «17:23:04».
// Секунды на экране требуют клиентского тика и гидрации; для срока в неделях
// они бесполезны. Кольцо показывает, сколько срока уже прошло, — процент
// «сгоревшего» времени пугает точнее, чем оставшиеся дни сами по себе.
const STYLES = `
:where([data-vibeui-block="calendar-020"]){
--vibeui-calendar-020-bg:oklch(1 0 0);
--vibeui-calendar-020-fg:oklch(0.24 0.014 265);
--vibeui-calendar-020-muted:oklch(0.62 0.014 265);
--vibeui-calendar-020-border:oklch(0.91 0.006 265);
--vibeui-calendar-020-track:oklch(0.94 0.005 265);
--vibeui-calendar-020-accent:oklch(0.55 0.16 265);
--vibeui-calendar-020-warn:oklch(0.65 0.16 70);
--vibeui-calendar-020-late:oklch(0.55 0.18 25);
--vibeui-calendar-020-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="calendar-020"]{
display:flex;align-items:center;gap:1rem;
width:100%;max-width:24rem;box-sizing:border-box;padding:1rem;
background:var(--vibeui-calendar-020-bg);
border:1px solid var(--vibeui-calendar-020-border);border-radius:1rem;
color:var(--vibeui-calendar-020-fg);font-family:var(--vibeui-calendar-020-font);
}
[data-vibeui-block="calendar-020"][data-tone="warn"]{--vibeui-calendar-020-accent:var(--vibeui-calendar-020-warn)}
[data-vibeui-block="calendar-020"][data-tone="late"]{--vibeui-calendar-020-accent:var(--vibeui-calendar-020-late)}
[data-vibeui-block="calendar-020"] [data-part="ring"]{
position:relative;flex:none;width:5.25rem;height:5.25rem;
display:flex;align-items:center;justify-content:center;
}
/* Дырку в кольце делает маска на отдельном слое, а не кружок-заглушка:
   заглушка обязана совпасть с фоном карточки, а маска работает на любой
   подложке — и не съедает подпись, которая лежит выше слоя. */
[data-vibeui-block="calendar-020"] [data-part="dial"]{
position:absolute;inset:0;border-radius:50%;
background:conic-gradient(var(--vibeui-calendar-020-accent) calc(var(--vibeui-calendar-020-progress,0) * 1%),var(--vibeui-calendar-020-track) 0);
mask-image:radial-gradient(circle,transparent 62%,#000 63%);
}
[data-vibeui-block="calendar-020"] [data-part="ring"] b{
position:relative;font-size:0.875rem;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--vibeui-calendar-020-fg);
}
[data-vibeui-block="calendar-020"] [data-part="body"]{min-width:0;display:flex;flex-direction:column;gap:0.25rem}
[data-vibeui-block="calendar-020"] [data-part="heading"]{
margin:0;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
color:var(--vibeui-calendar-020-muted);
}
[data-vibeui-block="calendar-020"] [data-part="left"]{
margin:0;font-size:1.375rem;font-weight:700;line-height:1.15;letter-spacing:-0.02em;
color:var(--vibeui-calendar-020-accent);
}
[data-vibeui-block="calendar-020"] [data-part="when"]{
margin:0;font-size:0.8125rem;color:var(--vibeui-calendar-020-muted);
}
[data-vibeui-block="calendar-020"] [data-part="when"] time{color:var(--vibeui-calendar-020-fg);font-weight:600}
[data-vibeui-block="calendar-020"] [data-part="bar"]{
height:0.25rem;border-radius:0.125rem;margin-top:0.1875rem;overflow:hidden;
background:var(--vibeui-calendar-020-track);
}
[data-vibeui-block="calendar-020"] [data-part="bar"] i{
display:block;height:100%;border-radius:inherit;
width:calc(var(--vibeui-calendar-020-progress,0) * 1%);
background:var(--vibeui-calendar-020-accent);
transition:width .3s ease;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="calendar-020"] *{animation:none!important;transition:none!important}}
`

const MINUTE = 60000
const HOUR = 3600000
const DAY = 86400000

function pluralize(count: number, forms: [string, string, string]) {
  const tens = count % 100
  const ones = count % 10

  if (tens > 10 && tens < 20) {
    return forms[2]
  }

  if (ones === 1) {
    return forms[0]
  }

  if (ones > 1 && ones < 5) {
    return forms[1]
  }

  return forms[2]
}

function humanize(span: number) {
  const days = Math.floor(span / DAY)
  const hours = Math.floor((span % DAY) / HOUR)
  const minutes = Math.floor((span % HOUR) / MINUTE)

  if (days > 0) {
    const head = `${days} ${pluralize(days, ["день", "дня", "дней"])}`

    return hours > 0
      ? `${head} ${hours} ${pluralize(hours, ["час", "часа", "часов"])}`
      : head
  }

  if (hours > 0) {
    return `${hours} ${pluralize(hours, ["час", "часа", "часов"])} ${minutes} ${pluralize(minutes, ["минута", "минуты", "минут"])}`
  }

  return `${minutes} ${pluralize(minutes, ["минута", "минуты", "минут"])}`
}

/**
 * Дедлайн-карточка: остаток словами, кольцо прогресса и дата сдачи.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Calendar020({
  deadline = "2026-04-01T18:00",
  now = "2026-03-14T09:30",
  startedAt = "2026-02-20T10:00",
  heading = "Сдача макетов",
  locale = "ru-RU",
  accent,
  className,
  style,
  ...props
}: Calendar020Props) {
  const target = new Date(deadline)
  const current = new Date(now)
  const started = new Date(startedAt)

  const span = target.getTime() - current.getTime()
  const whole = Math.max(1, target.getTime() - started.getTime())
  const progress = Math.min(
    100,
    Math.max(0, Math.round(((whole - span) / whole) * 100)),
  )

  const late = span <= 0
  const tone = late ? "late" : span < 3 * DAY ? "warn" : "calm"

  const stamp = new Intl.DateTimeFormat(locale, {
    dateStyle: "long",
    timeStyle: "short",
  }).format(target)

  const palette = {
    "--vibeui-calendar-020-progress": progress,
    ...(accent ? { "--vibeui-calendar-020-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-calendar-020" precedence="medium">
        {STYLES}
      </style>
      <article
        {...props}
        data-vibeui-block="calendar-020"
        data-tone={tone}
        className={className}
        style={palette}
      >
        <div data-part="ring" aria-hidden="true">
          <span data-part="dial" />
          <b>{progress}%</b>
        </div>
        <div data-part="body">
          <h3 data-part="heading">{heading}</h3>
          <p data-part="left">
            {late
              ? `Просрочено на ${humanize(-span)}`
              : `Осталось ${humanize(span)}`}
          </p>
          <p data-part="when">
            Срок: <time dateTime={deadline}>{stamp}</time>
          </p>
          <div data-part="bar" aria-hidden="true">
            <i />
          </div>
        </div>
      </article>
    </>
  )
}