Basic Blog

Overview

The BlogCard component provides a structured way to display blog information with flexible layout options. It supports both horizontal and vertical presentations and uses conditional rendering based on the isHorizontal prop. The component is styled with NativeWind for customization and rapid development.

UI Preview

Web (Light)Web (Dark)Mobile (Light)Mobile (Dark)

Usage Example

To implement the BasicBlog component, import it and pass the required blog data:

import React from "react";
import { BlogCard } from "@cloudnua-mobile/components/custom/blog-card";
import blogData from "./data";
 
export const BlogCardBasic = () => {
  return (
    <BlogCard
      publishedDate={blogData.publishedDate}
      category={blogData.category}
      title={blogData.title}
      description={blogData.description}
      authorName={blogData.authorName}
      designation={blogData.designation}
      authorProfileURI={blogData.authorProfileURI}
      bannerURI={blogData.bannerURI}
    />
  );
};

The component enhances visual presentation by offering a clean, organized way to present important information at a glance.