Uai Blocks Community Feed

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";

import { MessageSquare, MessagesSquare } from "lucide-react";
import { useState } from "react";
import {
  CommunityFeed,
  CommunityFeedDescription,
  CommunityFeedEmpty,
  CommunityFeedFilter,
  CommunityFeedFilters,
  CommunityFeedHeader,
  CommunityFeedPagination,
  CommunityFeedPost,
  CommunityFeedPostAuthor,
  CommunityFeedPostBody,
  CommunityFeedPostFooter,
  CommunityFeedPostHeader,
  CommunityFeedPostMeta,
  CommunityFeedPostReactions,
  CommunityFeedPosts,
  CommunityFeedPostTag,
  CommunityFeedPostTags,
  CommunityFeedPostTime,
  CommunityFeedPostTitle,
  CommunityFeedTitle,
  type CommunityFeedVariant,
} from "@/components/ui/uai-community-feed";
import { AuthorCardAvatar, AuthorCardName, AuthorCardRole } from "@/components/ui/uai-community-feed-utils/src-components-ui-uai-author-card";
import {
  EmptyStateContent,
  EmptyStateDescription,
  EmptyStateHeader,
  EmptyStateMedia,
  EmptyStateTitle,
} from "@/components/ui/uai-community-feed-utils/src-components-ui-uai-empty-state";
import { ReactionBarItem } from "@/components/ui/uai-community-feed-utils/src-components-ui-uai-reaction-bar";

const posts = [
  {
    id: "p1",
    kind: "show",
    author: "Amara Okafor",
    role: "Maintainer of kiln-plugin-maps",
    time: "2026-09-30T07:45",
    label: "3h ago",
    title: "Show Kiln: offline maps for documentation sites",
    body: "Tiles are pre-rendered at build time, so the map works without a tile server. The cache from 4.2 keeps rebuilds under a second.",
    tags: ["plugins", "maps"],
    likes: 48,
    replies: 12,
  },
  {
    id: "p2",
    kind: "question",
    author: "Jonas Berg",
    role: "Docs lead at Lumen",
    time: "2026-09-29T18:20",
    label: "Yesterday",
    title: "How do you version docs for three supported releases?",
    body: "We keep a branch per release and build each one separately. It works, but search shows results from every version at once.",
    tags: ["versioning", "search"],
    likes: 17,
    replies: 9,
  },
  {
    id: "p3",
    kind: "question",
    author: "Mei Lin",
    role: "Frontend engineer",
    time: "2026-09-28T10:05",
    label: "Sep 28",
    title: "Images are blurry after upgrading to 4.1",
    body: "Retina screenshots look soft since the AVIF change. Setting quality to 80 helped, but file sizes doubled.",
    tags: ["images"],
    likes: 6,
    replies: 4,
  },
  {
    id: "p4",
    kind: "show",
    author: "Rafael Souza",
    role: "Indie developer",
    time: "2026-09-27T21:30",
    label: "Sep 27",
    title: "A Kiln theme that reads well in print",
    body: "Print styles for long guides: page breaks before headings, link URLs in footnotes, and no navigation chrome.",
    tags: ["themes", "print"],
    likes: 31,
    replies: 7,
  },
];
const perPage = 2;

export function CommunityFeedPreview({ variant = "list" }: { variant?: CommunityFeedVariant }) {
  const [filter, setFilter] = useState("all");
  const [page, setPage] = useState(1);
  const matching = posts.filter((post) => filter === "all" || post.kind === filter);
  const visible = matching.slice((page - 1) * perPage, page * perPage);
  return (
    <CommunityFeed
      variant={variant}
      filter={filter}
      onFilterChange={setFilter}
      page={page}
      onPageChange={setPage}
    >
      <CommunityFeedHeader>
        <div style={{ display: "grid", gap: 4 }}>
          <CommunityFeedTitle>Community</CommunityFeedTitle>
          <CommunityFeedDescription>
            Questions, plugins, and themes from people building with Kiln.
          </CommunityFeedDescription>
        </div>
        <CommunityFeedFilters>
          <CommunityFeedFilter value="all">All</CommunityFeedFilter>
          <CommunityFeedFilter value="question">Questions</CommunityFeedFilter>
          <CommunityFeedFilter value="show">Show and tell</CommunityFeedFilter>
          <CommunityFeedFilter value="announcement">Announcements</CommunityFeedFilter>
        </CommunityFeedFilters>
      </CommunityFeedHeader>
      {visible.length ? (
        <CommunityFeedPosts>
          {visible.map((post) => (
            <CommunityFeedPost key={post.id}>
              <CommunityFeedPostHeader>
                <CommunityFeedPostAuthor>
                  <AuthorCardAvatar name={post.author} style={{ width: 24, height: 24 }} />
                  <AuthorCardName style={{ fontSize: 13, lineHeight: "18px" }}>
                    {post.author}
                  </AuthorCardName>
                  <AuthorCardRole>{post.role}</AuthorCardRole>
                </CommunityFeedPostAuthor>
                <CommunityFeedPostTime dateTime={post.time}>{post.label}</CommunityFeedPostTime>
              </CommunityFeedPostHeader>
              <CommunityFeedPostTitle href={`#${post.id}`}>{post.title}</CommunityFeedPostTitle>
              <CommunityFeedPostBody>{post.body}</CommunityFeedPostBody>
              <CommunityFeedPostTags>
                {post.tags.map((tag) => (
                  <CommunityFeedPostTag key={tag}>{tag}</CommunityFeedPostTag>
                ))}
              </CommunityFeedPostTags>
              <CommunityFeedPostFooter>
                <CommunityFeedPostReactions aria-label={`Reactions to ${post.title}`}>
                  <ReactionBarItem value="like" emoji="👍" label="Like" count={post.likes} />
                  <ReactionBarItem value="celebrate" emoji="🎉" label="Celebrate" count={4} />
                </CommunityFeedPostReactions>
                <CommunityFeedPostMeta href={`#${post.id}-replies`}>
                  <MessageSquare size={14} aria-hidden="true" />
                  {post.replies} replies
                </CommunityFeedPostMeta>
              </CommunityFeedPostFooter>
            </CommunityFeedPost>
          ))}
        </CommunityFeedPosts>
      ) : (
        <CommunityFeedEmpty>
          <EmptyStateMedia>
            <MessagesSquare />
          </EmptyStateMedia>
          <EmptyStateContent>
            <EmptyStateHeader>
              <EmptyStateTitle>No announcements yet</EmptyStateTitle>
              <EmptyStateDescription>
                Release news and events will show up here. Pick another filter to keep reading.
              </EmptyStateDescription>
            </EmptyStateHeader>
          </EmptyStateContent>
        </CommunityFeedEmpty>
      )}
      <CommunityFeedPagination pageCount={Math.ceil(matching.length / perPage)} />
    </CommunityFeed>
  );
}

function SourceSpecimen(){return <CommunityFeedPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}