create-manifest 1.3.3 → 2.0.0

package/starter/src/web/components/blog-post-card.tsx

@@ -0,0 +1,286 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { ArrowRight } from 'lucide-react'
+
+export interface BlogPost {
+  id: string
+  title: string
+  excerpt: string
+  coverImage?: string
+  author: {
+    name: string
+    avatar?: string
+  }
+  publishedAt: string
+  readTime?: string
+  tags?: string[]
+  category?: string
+}
+
+const defaultPost: BlogPost = {
+  id: '1',
+  title: 'Getting Started with Agentic UI Components',
+  excerpt:
+    'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',
+  coverImage:
+    'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800',
+  author: {
+    name: 'Sarah Chen',
+    avatar: 'https://i.pravatar.cc/150?u=sarah'
+  },
+  publishedAt: '2024-01-15',
+  readTime: '5 min read',
+  tags: ['Tutorial', 'Components'],
+  category: 'Tutorial'
+}
+
+export interface BlogPostCardProps {
+  post?: BlogPost
+  variant?: 'default' | 'compact' | 'horizontal' | 'covered'
+  showImage?: boolean
+  showAuthor?: boolean
+  showCategory?: boolean
+  onReadMore?: (post: BlogPost) => void
+}
+
+export function BlogPostCard({
+  post = defaultPost,
+  variant = 'default',
+  showImage = true,
+  showAuthor = true,
+  showCategory = true,
+  onReadMore
+}: BlogPostCardProps) {
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  }
+
+  if (variant === 'covered') {
+    return (
+      <div className="relative overflow-hidden rounded-lg">
+        <div className="min-h-[320px] sm:aspect-[16/9] sm:min-h-0 w-full">
+          {post.coverImage ? (
+            <img
+              src={post.coverImage}
+              alt={post.title}
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          ) : (
+            <div className="absolute inset-0 h-full w-full bg-muted" />
+          )}
+        </div>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20" />
+        <div className="absolute inset-0 flex flex-col justify-between p-4 text-white">
+          <div className="flex gap-1">
+            {showCategory && post.category && (
+              <span className="rounded-full bg-white/20 px-2 py-0.5 text-xs backdrop-blur-sm">
+                {post.category}
+              </span>
+            )}
+            {post.tags &&
+              post.tags.slice(0, 1).map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-white/20 px-2 py-0.5 text-xs backdrop-blur-sm"
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+          <div>
+            <h2 className="text-lg font-bold leading-tight">{post.title}</h2>
+            <p className="mt-1 line-clamp-2 text-sm text-white/80">
+              {post.excerpt}
+            </p>
+            <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              {showAuthor && (
+                <div className="flex items-center gap-2">
+                  {post.author.avatar && (
+                    <img
+                      src={post.author.avatar}
+                      alt={post.author.name}
+                      className="h-6 w-6 rounded-full ring-2 ring-white/30"
+                    />
+                  )}
+                  <div className="text-xs">
+                    <p className="font-medium">{post.author.name}</p>
+                    <p className="text-white/60">{formatDate(post.publishedAt)}</p>
+                  </div>
+                </div>
+              )}
+              <Button
+                size="sm"
+                variant="secondary"
+                className="w-full sm:w-auto"
+                onClick={() => onReadMore?.(post)}
+              >
+                Read article
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'horizontal') {
+    return (
+      <div className="test flex flex-col sm:flex-row gap-4 rounded-lg border bg-card p-3 transition-colors hover:bg-muted/50">
+        {showImage && post.coverImage && (
+          <div className="aspect-video sm:aspect-square sm:h-24 sm:w-24 shrink-0 overflow-hidden rounded-md">
+            <img
+              src={post.coverImage}
+              alt={post.title}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        )}
+        <div className="flex flex-1 flex-col justify-between">
+          <div>
+            {showCategory && post.category && (
+              <span className="mb-1 inline-block rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                {post.category}
+              </span>
+            )}
+            <h3 className="line-clamp-2 text-sm font-medium leading-tight">
+              {post.title}
+            </h3>
+            <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+              {post.excerpt}
+            </p>
+          </div>
+          <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {showAuthor && post.author.avatar && (
+                <img
+                  src={post.author.avatar}
+                  alt={post.author.name}
+                  className="h-4 w-4 rounded-full"
+                />
+              )}
+              <span>{formatDate(post.publishedAt)}</span>
+              {post.readTime && (
+                <>
+                  <span>·</span>
+                  <span>{post.readTime}</span>
+                </>
+              )}
+            </div>
+            <Button
+              size="sm"
+              className="w-full sm:w-auto"
+              onClick={() => onReadMore?.(post)}
+            >
+              Read
+              <ArrowRight className="ml-1 h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <div className="flex h-full flex-col justify-between rounded-lg border bg-card p-3 transition-colors hover:bg-muted/50">
+        <div>
+          {showCategory && post.category && (
+            <span className="mb-2 inline-block rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+              {post.category}
+            </span>
+          )}
+          <h3 className="line-clamp-2 text-sm font-medium">{post.title}</h3>
+          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+            {post.excerpt}
+          </p>
+        </div>
+        <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-2">
+            {showAuthor && post.author.avatar && (
+              <img
+                src={post.author.avatar}
+                alt={post.author.name}
+                className="h-5 w-5 rounded-full"
+              />
+            )}
+            <span className="text-xs text-muted-foreground">
+              {formatDate(post.publishedAt)}
+            </span>
+          </div>
+          <Button size="sm" onClick={() => onReadMore?.(post)}>
+            Read more
+            <ArrowRight className="ml-1 h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card transition-colors hover:bg-muted/50">
+      {showImage && post.coverImage && (
+        <div className="aspect-video overflow-hidden">
+          <img
+            src={post.coverImage}
+            alt={post.title}
+            className="h-full w-full object-cover transition-transform hover:scale-105"
+          />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col justify-between p-4">
+        <div>
+          <div className="mb-2 flex flex-wrap items-center gap-2">
+            {showCategory && post.category && (
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                {post.category}
+              </span>
+            )}
+            {post.tags &&
+              post.tags.length > 0 &&
+              post.tags.slice(0, 2).map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                >
+                  {tag}
+                </span>
+              ))}
+          </div>
+          <h3 className="line-clamp-2 font-medium">{post.title}</h3>
+          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
+            {post.excerpt}
+          </p>
+        </div>
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          {showAuthor && (
+            <div className="flex items-center gap-2">
+              {post.author.avatar && (
+                <img
+                  src={post.author.avatar}
+                  alt={post.author.name}
+                  className="h-6 w-6 rounded-full"
+                />
+              )}
+              <div className="text-xs">
+                <p className="font-medium">{post.author.name}</p>
+                <p className="text-muted-foreground">
+                  {formatDate(post.publishedAt)}
+                </p>
+              </div>
+            </div>
+          )}
+          <Button size="sm" onClick={() => onReadMore?.(post)}>
+            Read
+            <ArrowRight className="ml-1 h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/starter/src/web/components/blog-post-list.tsx

@@ -0,0 +1,291 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useState } from 'react'
+import { BlogPost, BlogPostCard } from './blog-post-card'
+
+const defaultPosts: BlogPost[] = [
+  {
+    id: '1',
+    title: 'Getting Started with Agentic UI Components',
+    excerpt:
+      'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',
+    coverImage:
+      'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800',
+    author: {
+      name: 'Sarah Chen',
+      avatar: 'https://i.pravatar.cc/150?u=sarah'
+    },
+    publishedAt: '2024-01-15',
+    readTime: '5 min read',
+    tags: ['Tutorial', 'Components', 'AI'],
+    category: 'Tutorial'
+  },
+  {
+    id: '2',
+    title: 'Designing for Conversational Interfaces',
+    excerpt:
+      'Best practices for creating intuitive UI components that work within chat environments.',
+    coverImage:
+      'https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800',
+    author: {
+      name: 'Alex Rivera',
+      avatar: 'https://i.pravatar.cc/150?u=alex'
+    },
+    publishedAt: '2024-01-12',
+    readTime: '8 min read',
+    tags: ['Design', 'UX'],
+    category: 'Design'
+  },
+  {
+    id: '3',
+    title: 'MCP Integration Patterns',
+    excerpt:
+      'How to leverage Model Context Protocol for seamless backend communication in your agentic applications.',
+    coverImage:
+      'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800',
+    author: {
+      name: 'Jordan Kim',
+      avatar: 'https://i.pravatar.cc/150?u=jordan'
+    },
+    publishedAt: '2024-01-10',
+    readTime: '12 min read',
+    tags: ['MCP', 'Backend', 'Integration'],
+    category: 'Development'
+  },
+  {
+    id: '4',
+    title: 'Building Payment Flows in Chat',
+    excerpt:
+      'A complete guide to implementing secure, user-friendly payment experiences within conversational interfaces.',
+    coverImage:
+      'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800',
+    author: {
+      name: 'Morgan Lee',
+      avatar: 'https://i.pravatar.cc/150?u=morgan'
+    },
+    publishedAt: '2024-01-08',
+    readTime: '10 min read',
+    tags: ['Payments', 'Security'],
+    category: 'Tutorial'
+  }
+]
+
+export interface BlogPostListProps {
+  posts?: BlogPost[]
+  variant?: 'list' | 'grid' | 'carousel'
+  columns?: 2 | 3
+  showAuthor?: boolean
+  showCategory?: boolean
+  onReadMore?: (post: BlogPost) => void
+}
+
+export function BlogPostList({
+  posts = defaultPosts,
+  variant = 'list',
+  columns = 2,
+  showAuthor = true,
+  showCategory = true,
+  onReadMore
+}: BlogPostListProps) {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  // List variant
+  if (variant === 'list') {
+    return (
+      <div className="space-y-3">
+        {posts.slice(0, 3).map((post) => (
+          <BlogPostCard
+            key={post.id}
+            post={post}
+            variant="horizontal"
+            showAuthor={showAuthor}
+            showCategory={showCategory}
+            onReadMore={onReadMore}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // Grid variant
+  if (variant === 'grid') {
+    return (
+      <div
+        className={cn(
+          'grid gap-4 grid-cols-1',
+          columns === 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-3'
+        )}
+      >
+        {posts.map((post) => (
+          <BlogPostCard
+            key={post.id}
+            post={post}
+            variant="compact"
+            showImage={false}
+            showAuthor={showAuthor}
+            showCategory={showCategory}
+            onReadMore={onReadMore}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // Carousel variant
+  const maxIndexMobile = posts.length - 1
+  const maxIndexTablet = Math.max(0, posts.length - 2)
+  const maxIndexDesktop = Math.max(0, posts.length - 3)
+
+  const prev = () => {
+    setCurrentIndex((i) => Math.max(0, i - 1))
+  }
+
+  const next = () => {
+    setCurrentIndex((i) => i + 1)
+  }
+
+  const isAtStart = currentIndex === 0
+  const isAtEndMobile = currentIndex >= maxIndexMobile
+  const isAtEndTablet = currentIndex >= maxIndexTablet
+  const isAtEndDesktop = currentIndex >= maxIndexDesktop
+
+  return (
+    <div className="relative">
+      <div className="overflow-hidden rounded-lg">
+        {/* Mobile: 1 card, slides by 100% */}
+        <div
+          className="flex transition-transform duration-300 ease-out md:hidden"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-full shrink-0 px-0.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Tablet: 2 cards visible, slides by 50% */}
+        <div
+          className="hidden md:flex lg:hidden transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${currentIndex * 50}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-1/2 shrink-0 px-1.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Desktop: 3 cards visible, slides by 33.333% */}
+        <div
+          className="hidden lg:flex transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${currentIndex * (100 / 3)}%)` }}
+        >
+          {posts.map((post) => (
+            <div key={post.id} className="w-1/3 shrink-0 px-1.5">
+              <BlogPostCard
+                post={post}
+                variant="compact"
+                showAuthor={showAuthor}
+                showCategory={showCategory}
+                onReadMore={onReadMore}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="mt-3 flex items-center justify-between px-2">
+        <div className="flex gap-1">
+          {posts.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentIndex(i)}
+              className={cn(
+                'h-1.5 rounded-full transition-all',
+                i === currentIndex
+                  ? 'w-4 bg-foreground'
+                  : 'w-1.5 bg-muted-foreground/30'
+              )}
+            />
+          ))}
+        </div>
+        {/* Mobile navigation */}
+        <div className="flex gap-1 md:hidden">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndMobile}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Tablet navigation */}
+        <div className="hidden md:flex lg:hidden gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndTablet}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Desktop navigation */}
+        <div className="hidden lg:flex gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prev}
+            disabled={isAtStart}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={next}
+            disabled={isAtEndDesktop}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/starter/src/web/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }