Chat Commit

Карточка git-коммита с заголовком, автором, временем и списком изменённых файлов.

Mapp/products/[id]/page.tsx

426

Aapp/lib/cache.ts

156

Dapp/lib/revalidate.ts

Rapp/lib/old-cache.ts

import {
  ChatCommit,
  ChatCommitActions,
  ChatCommitAuthor,
  ChatCommitAvatar,
  ChatCommitContent,
  ChatCommitCopyHashButton,
  ChatCommitFile,
  ChatCommitHash,
  ChatCommitHeader,
  ChatCommitInfo,
  ChatCommitMessage,
  ChatCommitMetadata,
  ChatCommitSeparator,
  ChatCommitTimestamp,
} from "@/components/ui/chat-commit";

const commitDate = new Date(Date.now() - 36 * 60 * 60 * 1000);

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatCommit defaultOpen>
        <ChatCommitHeader>
          <ChatCommitInfo>
            <ChatCommitMessage>
              feat: добавить основной API Cache Components
            </ChatCommitMessage>
            <ChatCommitMetadata>
              <ChatCommitHash>a1b2c3d</ChatCommitHash>
              <ChatCommitSeparator />
              <ChatCommitAuthor>
                <ChatCommitAvatar initials="МВ" />
                Михаил Воробьёв
              </ChatCommitAuthor>
              <ChatCommitSeparator />
              <ChatCommitTimestamp date={commitDate} />
            </ChatCommitMetadata>
          </ChatCommitInfo>
          <ChatCommitActions>
            <ChatCommitCopyHashButton hash="a1b2c3d4e5f6g7h8" />
          </ChatCommitActions>
        </ChatCommitHeader>
        <ChatCommitContent>
          <ChatCommitFile
            additions={42}
            deletions={6}
            path="app/products/[id]/page.tsx"
            status="modified"
          />
          <ChatCommitFile
            additions={156}
            path="app/lib/cache.ts"
            status="added"
          />
          <ChatCommitFile
            deletions={88}
            path="app/lib/revalidate.ts"
            status="deleted"
          />
          <ChatCommitFile path="app/lib/old-cache.ts" status="renamed" />
        </ChatCommitContent>
      </ChatCommit>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-commit

Использование

import {
  ChatCommit,
  ChatCommitActions,
  ChatCommitAuthor,
  ChatCommitAvatar,
  ChatCommitContent,
  ChatCommitCopyHashButton,
  ChatCommitFile,
  ChatCommitHash,
  ChatCommitHeader,
  ChatCommitInfo,
  ChatCommitMessage,
  ChatCommitMetadata,
  ChatCommitSeparator,
  ChatCommitTimestamp,
} from "@/components/ui/chat-commit";
 
<ChatCommit defaultOpen>
  <ChatCommitHeader>
    <ChatCommitInfo>
      <ChatCommitMessage>feat: introduce Cache Components</ChatCommitMessage>
      <ChatCommitMetadata>
        <ChatCommitHash>a1b2c3d</ChatCommitHash>
        <ChatCommitSeparator />
        <ChatCommitAuthor>
          <ChatCommitAvatar initials="MV" />
          Mikhail Vorobyov
        </ChatCommitAuthor>
        <ChatCommitSeparator />
        <ChatCommitTimestamp date={new Date("2026-05-12")} />
      </ChatCommitMetadata>
    </ChatCommitInfo>
    <ChatCommitActions>
      <ChatCommitCopyHashButton hash="a1b2c3d4e5f6" />
    </ChatCommitActions>
  </ChatCommitHeader>
  <ChatCommitContent>
    <ChatCommitFile additions={42} path="app/page.tsx" status="modified" />
    <ChatCommitFile additions={156} path="app/lib/cache.ts" status="added" />
    <ChatCommitFile deletions={88} path="app/lib/revalidate.ts" status="deleted" />
  </ChatCommitContent>
</ChatCommit>

Статус файла

`status`	Префикс
`added`	A (изумрудный)
`modified`	M (янтарный)
`deleted`	D (красный)
`renamed`	R (синий)

Время рендерится через Intl.RelativeTimeFormat — «2 дня назад» / «через 3 часа».

На этой странице

Установка Использование Статус файла