Blogger React Component Library

A collection of React components for building blog interfaces.

Installation

npm install react-blog-ui-kit
# or
yarn add react-blog-ui-kit

import css at the root of your app

import "react-blog-ui-kit/styles.css";

Components

Usage Examples

BlogCard

A card component to display blog post previews.

import { Card, CardImage, CardContent, CardHeader, CardFooter } from "react-blog-ui-kit";

function BlogCard() {
  return (
    <Card slug="/car-blog">
      <CardImage src="/image.jpg" alt="Card Image" />
      <CardHeader title="Card Title" />
      <CardContent>
        <p>Card content goes here...</p>
      </CardContent>
      <CardFooter>Footer content</CardFooter>
    </Card>
  );
}

BlogDetailed

A component to display a list of blog posts.

import { BlogDetailedComponent } from "react-blog-ui-kit";

function BlogPost() {
  const postData = {
    title: "Getting Started with React",
    content: JSON.stringify({
      type: "doc",
      content: [
        {
          type: "paragraph",
          content: [{ type: "text", text: "This is a sample blog post content." }],
        },
      ],
    }),
    author: {
      name: "John Doe",
      avatar: "/avatar.jpg",
      bio: "Frontend Developer",
    },
    publishedAt: "2023-05-15T10:30:00Z",
    featuredImage: "/featured-image.jpg",
    readingTime: "5 min read",
    category: [{ name: "React", slug: "react" }],
    faqs: [
      { question: "What is React?", answer: "React is a JavaScript library for building user interfaces." },
      { question: "Why use React?", answer: "React makes it easy to create interactive UIs." },
    ],
  };

  const recentPosts = {
    data: {
      posts: [
        {
          id: 1,
          title: "Introduction to TypeScript",
          slug: "intro-to-typescript",
          featuredImage: "/typescript.jpg",
          publishedDate: "2023-05-10T08:15:00Z",
        },
        {
          id: 2,
          title: "CSS Grid Layout Tutorial",
          slug: "css-grid-tutorial",
          featuredImage: "/css-grid.jpg",
          publishedDate: "2023-05-05T14:20:00Z",
        },
      ],
    },
  };

  return (
    <BlogDetailedComponent
      postData={postData}
      recentPosts={recentPosts}
      username="johndoe"
      containerClassName="max-w-4xl mx-auto"
      headerClassName="mb-8"
      titleClassName="text-3xl font-bold"
      contentClassName="prose lg:prose-xl"
      carouselTitle="More from this author"
      carouselViewAllText="View all posts"
      carouselViewAllLink="/blog"
      renderFAQs={(faqs) => (
        <div className="mt-8 bg-gray-50 p-6 rounded-lg">
          <h3 className="text-xl font-bold mb-4">Frequently Asked Questions</h3>
          {faqs.map((faq, index) => (
            <div key={index} className="mb-4">
              <h4 className="font-medium">{faq.question}</h4>
              <p className="text-gray-600">{faq.answer}</p>
            </div>
          ))}
        </div>
      )}
    />
  );
}

BlogHomeComponent

A component for creating a blog homepage with featured posts, recent posts, and search functionality.

import { BlogHomeComponent } from "react-blog-ui-kit";

function BlogHome() {
  const featuredPosts = [
    {
      id: 1,
      title: "Getting Started with React",
      slug: "getting-started-with-react",
      featuredImage: "/react.jpg",
      publishedDate: "2023-05-15T10:30:00Z",
      category: [{ name: "React", slug: "react" }],
    },
    {
      id: 2,
      title: "CSS Grid Layout Tutorial",
      slug: "css-grid-tutorial",
      featuredImage: "/css-grid.jpg",
      publishedDate: "2023-05-05T14:20:00Z",
      category: [{ name: "CSS", slug: "css" }],
    },
  ];

  const recentPosts = [
    {
      id: 3,
      title: "JavaScript Best Practices",
      slug: "javascript-best-practices",
      featuredImage: "/javascript.jpg",
      publishedDate: "2023-04-28T09:45:00Z",
      category: [{ name: "JavaScript", slug: "javascript" }],
    },
    {
      id: 4,
      title: "Introduction to TypeScript",
      slug: "intro-to-typescript",
      featuredImage: "/typescript.jpg",
      publishedDate: "2023-04-20T11:15:00Z",
      category: [{ name: "TypeScript", slug: "typescript" }],
    },
  ];

  const searchItems = [
    { id: "1", title: "Getting Started with React", excerpt: "Learn the basics of React" },
    { id: "2", title: "CSS Grid Layout Tutorial", excerpt: "Master CSS Grid layouts" },
    { id: "3", title: "JavaScript Best Practices", excerpt: "Write better JavaScript code" },
  ];

  return (
    <BlogHomeComponent
      featuredPostContent={featuredPosts}
      recentPostContent={recentPosts}
      username="johndoe"
      searchItems={searchItems}
      primaryHeading="Welcome to My Blog"
      secondaryHeading="Exploring web development and design"
      heroImageUrl="/hero-image.jpg"
      heroImageAlt="Blog hero image"
    />
  );
}

BlogDetailedComponent

A comprehensive component for displaying a detailed blog post with customizable styling and optional recent posts carousel.

import { BlogDetailedComponent } from "react-blog-ui-kit";function BlogPost() { const postData = { title: "Getting Started with React", content: JSON.stringify({ type: "doc", content: [ { type: "paragraph", content: [{ type: "text", text: "This is a sample blog post content." }] } ] }), author: { name: "John Doe", avatar: "/avatar.jpg", bio: "Frontend Developer" }, publishedAt: "2023-05-15T10:30:00Z", featuredImage: "/featured-image.jpg", readingTime: "5 min read", category: [{ name: "React", slug: "react" }], faqs: [ { question: "What is React?", answer: "React is a JavaScript library for building user interfaces." }, { question: "Why use React?", answer: "React makes it easy to create interactive UIs." } ] }; const recentPosts = { data: { posts: [ { id: 1, title: "Introduction to TypeScript", slug: "intro-to-typescript", featuredImage: "/typescript.jpg", publishedDate: "2023-05-10T08:15:00Z" }, { id: 2, title: "CSS Grid Layout Tutorial", slug: "css-grid-tutorial", featuredImage: "/css-grid.jpg", publishedDate: "2023-05-05T14:20:00Z" } ] } }; return ( <BlogDetailedComponent postData={postData} recentPosts={recentPosts} username="johndoe" containerClassName="max-w-4xl mx-auto" headerClassName="mb-8" titleClassName="text-3xl font-bold" contentClassName="prose lg:prose-xl" carouselTitle="More from this author" carouselViewAllText="View all posts" carouselViewAllLink="/blog" renderFAQs={(faqs) => ( <div className="mt-8 bg-gray-50 p-6         rounded-lg"> <h3 className="text-xl font-bold           mb-4">Frequently Asked Questions</h3> {faqs.map((faq, index) => ( <div key={index} className="mb-4"> <h4 className="font-medium">{faq. question}</h4> <p className="text-gray-600">{faq. answer}</p> </div> ))} </div> )} /> );}
BlogHomeComponent
A component for creating a blog homepage with featured posts, recent posts, and search functionality.

````jsx

import { BlogHomeComponent } from "react-blog-ui-kit";function BlogHome() {  const featuredPosts = [    {      id: 1,      title: "Getting Started with React",      slug: "getting-started-with-react",      featuredImage: "/react.jpg",      publishedDate: "2023-05-15T10:30:00Z",      category: [{ name: "React", slug: "react" }]    },    {      id: 2,      title: "CSS Grid Layout Tutorial",      slug: "css-grid-tutorial",      featuredImage: "/css-grid.jpg",      publishedDate: "2023-05-05T14:20:00Z",      category: [{ name: "CSS", slug: "css" }]    }  ];  const recentPosts = [    {      id: 3,      title: "JavaScript Best Practices",      slug: "javascript-best-practices",      featuredImage: "/javascript.jpg",      publishedDate: "2023-04-28T09:45:00Z",      category: [{ name: "JavaScript", slug:       "javascript" }]    },    {      id: 4,      title: "Introduction to TypeScript",      slug: "intro-to-typescript",      featuredImage: "/typescript.jpg",      publishedDate: "2023-04-20T11:15:00Z",      category: [{ name: "TypeScript", slug:       "typescript" }]    }  ];  const searchItems = [    { id: "1", title: "Getting Started with     React", excerpt: "Learn the basics of     React" },    { id: "2", title: "CSS Grid Layout Tutorial",     excerpt: "Master CSS Grid layouts" },    { id: "3", title: "JavaScript Best     Practices", excerpt: "Write better JavaScript     code" }  ];  return (    <BlogHomeComponent      featuredPostContent={featuredPosts}      recentPostContent={recentPosts}      username="johndoe"      searchItems={searchItems}      primaryHeading="Welcome to My Blog"      secondaryHeading="Exploring web development       and design"      heroImageUrl="/hero-image.jpg"      heroImageAlt="Blog hero image"    />  );}

BlogPrimaryCard

A card component for displaying blog post previews with title, featured image, and metadata.

import { BlogPrimaryCard } from "react-blog-ui-kit";

function FeaturedPost() {
  return (
    <BlogPrimaryCard
      title="Getting Started with React"
      slug="/blog/getting-started-with-react"
      featuredImage="/images/react.jpg"
      username="johndoe"
      publishedDate="2023-05-15T10:30:00Z"
      isNew={true}
      isFeatured={true}
      category={[
        { name: "React", slug: "react" },
        { name: "JavaScript", slug: "javascript" }
      ]}
    />
  );
}

BlogPagination

A pagination component for blog lists.

import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext } from "react-blog-ui-kit";

function BlogPagination() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationPrevious />
        <PaginationItem>1</PaginationItem>
        <PaginationItem isActive>2</PaginationItem>
        <PaginationItem>3</PaginationItem>
        <PaginationNext />
      </PaginationContent>
    </Pagination>
  );
}

BlogSearch

A search component for filtering blog posts.

import { Search } from "react-blog-ui-kit";

function BlogSearch() {
  return <Search items={searchItems} entityType="posts" getRedirectPath={(item) => `/posts/${item.id}`} buttonLabel="Search Posts" />;
}

Tag

Tag component

import { Tag } from "react-blog-ui-kit";

function BlogTags() {
  return (
    <>
      {/* Simple tag */}
      <Tag>New</Tag>

      {/* Tag with variant */}
      <Tag variant="secondary">Featured</Tag>

      {/* Tag as link with count */}
      <Tag href="/category/tech" count={42}>
        Technology
      </Tag>

      {/* Interactive tag */}
      <Tag onClick={() => console.log("clicked")}>Click me</Tag>
    </>
  );
}

Grid

A responsive grid component for displaying items.

import { Grid } from "react-blog-ui-kit";

function BlogGrid() {
  return (
    <Grid
      columns={{
        sm: 1,
        md: 2,
        lg: 3,
        xl: 4,
      }}
      gap={4}
    >
      {/* Grid items */}
    </Grid>
  );
}

Content Carousel

import { ContentCarousel } from "./ContentCarousel";
function ContnetCarousel() {
  return (
    <ContentCarousel
      title="Featured Posts"
      viewAllText="View All"
      viewAllLink="#"
      content={[
        {
          id: 1,
          title: "First Post",
          image: "https://via.placeholder.com/150",
          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        },
        {
          id: 2,
          title: "Second Post",
          image: "https://via.placeholder.com/150",
          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        },
        {
          id: 3,
          title: "Third Post",
          image: "https://via.placeholder.com/150",
          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        },
      ]}
      renderItem={(item) => (
        <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-lg">
          <img src={item.image} alt={item.title} className="w-24 h-24 mb-4" />
          <h3 className="text-xl font-bold">{item.title}</h3>
          <p className="text-gray-700">{item.description}</p>
        </div>
      )}
    />
  );
}

Input

A customizable input component with various styles.

import { Input } from "react-blog-ui-kit";

function SearchInput() {
  return <Input type="text" placeholder="Search articles..." className="w-full max-w-md" onChange={(e) => console.log(e.target.value)} />;
}

Button

A customizable button component with various styles.

import { Button } from "react-blog-ui-kit";

function ActionButtons() {
  return (
    <div className="flex gap-4">
      <Button onClick={() => console.log("Clicked!")}>Primary Action</Button>
    </div>
  );
}

Filter

import { Filter } from "react-blog-ui-kit";

function BlogFilter() {
  const filterConfig = {
    categories: ["All", "Technology", "Travel", "Food", "Lifestyle"],
    sortOptions: [
      { label: "Newest First", value: "newest" },
      { label: "Oldest First", value: "oldest" },
      { label: "Most Popular", value: "popular" },
    ],
    toggleFilters: {
      featured: { label: "Featured Only", value: false },
      published: { label: "Published Only", value: true },
    },
    showDateFilter: true,
  };

  return (
    <Filter
      config={filterConfig}
      onFilterChange={(state) => console.log("Filter state:", state)}
      sidebarClassName="bg-gray-100"
      buttonClassName="bg-primary text-white"
    >
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {/* Your filtered content here */}
        <p>Your filtered content will appear here</p>
      </div>
    </Filter>
  );
}

Dropdown

import { Dropdown } from "react-blog-ui-kit";

function BlogDropdown() {
  return (
    <Dropdown
      trigger={<button className="px-4 py-2 bg-gray-100 rounded-md">Menu</button>}
      contentClassName="min-w-[200px] bg-white shadow-lg rounded-md p-2"
    >
      <div className="flex flex-col space-y-2">
        <a href="#" className="px-3 py-2 hover:bg-gray-100 rounded-md">
          Profile
        </a>
        <a href="#" className="px-3 py-2 hover:bg-gray-100 rounded-md">
          Settings
        </a>
        <a href="#" className="px-3 py-2 hover:bg-gray-100 rounded-md">
          Logout
        </a>
      </div>
    </Dropdown>
  );
}

StatCard

import { StatCard } from "react-blog-ui-kit";
import { BarChart2 } from "lucide-react";

function BlogStats() {
  return (
    <div className="flex gap-4 flex-wrap">
      <StatCard title="Total Views" value="12,345" icon={<BarChart2 size={18} />} bgColor="bg-blue-50" textColor="text-blue-500" />
      <StatCard title="Comments" value="256" icon={<MessageCircle size={18} />} bgColor="bg-green-50" textColor="text-green-500" />
      <StatCard title="Subscribers" value="1,024" icon={<Users size={18} />} bgColor="bg-purple-50" textColor="text-purple-500" />
    </div>
  );
}

TableComponent

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "react-blog-ui-kit";

function BlogTable() {
  const posts = [
    { id: 1, title: "Getting Started with React", views: 1234, comments: 15 },
    { id: 2, title: "CSS Grid Layout Tutorial", views: 987, comments: 8 },
    { id: 3, title: "JavaScript Best Practices", views: 2345, comments: 32 },
  ];

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Title</TableHead>
          <TableHead>Views</TableHead>
          <TableHead>Comments</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {posts.map((post) => (
          <TableRow key={post.id}>
            <TableCell>{post.title}</TableCell>
            <TableCell>{post.views}</TableCell>
            <TableCell>{post.comments}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Loader

import { Loader } from "react-blog-ui-kit";

function BlogLoader() {
  return (
    <div className="flex flex-col gap-4">
      <Loader text="Loading posts..." color="#3b82f6" />
      <Loader text="Please wait" color="#10b981" textClassName="text-green-600" />
    </div>
  );
}

Sidebar

import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarNav, SidebarNavItem } from "react-blog-ui-kit";

function BlogSidebar() {
  return (
    <Sidebar className="w-64 h-screen">
      <SidebarHeader>
        <h2 className="text-xl font-bold">Blog Admin</h2>
      </SidebarHeader>
      <SidebarContent>
        <SidebarNav>
          <SidebarNavItem href="/dashboard" active>
            Dashboard
          </SidebarNavItem>
          <SidebarNavItem href="/posts">Posts</SidebarNavItem>
          <SidebarNavItem href="/categories">Categories</SidebarNavItem>
          <SidebarNavItem href="/comments">Comments</SidebarNavItem>
        </SidebarNav>
      </SidebarContent>
      <SidebarFooter>
        <p className="text-sm text-gray-500">© 2024 My Blog</p>
      </SidebarFooter>
    </Sidebar>
  );
}

CSS Modules

All components support custom styling through CSS modules. Import the default styles or override them with your own.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT