@olwiba/ui 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/blog/ChangelogCard.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface ChangelogCardProps {
+  title: string;
+  summary: string;
+  date: string;
+  slug: string;
+  version?: string;
+  hrefPrefix?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function ChangelogCard({
+  title,
+  summary,
+  date,
+  slug,
+  version,
+  hrefPrefix = '/changelog',
+  renderLink,
+}: ChangelogCardProps) {
+  const href = `${hrefPrefix}/${slug}`;
+
+  const LinkWrapper = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) =>
+    renderLink ? (
+      renderLink({ href, children, className })
+    ) : (
+      <a href={href} className={className}>
+        {children}
+      </a>
+    );
+
+  return (
+    <article className="group flex flex-col gap-3 border-b border-border/60 pb-8 last:border-0 last:pb-0">
+      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+        <time dateTime={date}>{formatDate(date)}</time>
+        {version && (
+          <>
+            <span>·</span>
+            <Badge variant="secondary" className="font-mono text-xs">
+              {version}
+            </Badge>
+          </>
+        )}
+      </div>
+      <h2 className="text-lg font-semibold leading-snug tracking-tight">
+        <LinkWrapper className="transition-colors hover:text-primary">{title}</LinkWrapper>
+      </h2>
+      <p className={cn('line-clamp-3 text-sm text-muted-foreground')}>{summary}</p>
+      <LinkWrapper className="text-sm font-medium text-primary hover:underline">
+        Read release notes →
+      </LinkWrapper>
+    </article>
+  );
+}

package/src/blog/ChangelogList.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { AppShellRenderLink } from '../app/AppShell';
+import { ChangelogCard, type ChangelogCardProps } from './ChangelogCard';
+
+export interface ChangelogListProps {
+  entries: ChangelogCardProps[];
+  renderLink?: AppShellRenderLink;
+  emptyMessage?: string;
+  hrefPrefix?: string;
+}
+
+export function ChangelogList({
+  entries,
+  renderLink,
+  emptyMessage = 'No changelog entries yet.',
+  hrefPrefix,
+}: ChangelogListProps) {
+  if (entries.length === 0) {
+    return <p className="text-sm italic text-muted-foreground">{emptyMessage}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      {entries.map((entry) => (
+        <ChangelogCard
+          key={entry.slug}
+          {...entry}
+          hrefPrefix={hrefPrefix}
+          renderLink={renderLink}
+        />
+      ))}
+    </div>
+  );
+}

package/src/index.ts

@@ -107,6 +107,8 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 // ─── Blog ────────────────────────────────────────────────────────────────────
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
+export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
+export { ChangelogCard, type ChangelogCardProps } from './blog/ChangelogCard';
 export { MdxContent, type MdxContentProps } from './blog/MdxContent';
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────