Hero Image Blog

Overview

The BlogHeroImage component displays a hero image alongside a curated list of blog posts, with an integrated search feature for post filtering.

UI Preview

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

Usage

Import the component and pass blog post data:

import React from "react";
import { BlogHeroImage } from "@cloudnua-mobile/components/custom/blog-hero-image";
import blogPosts from "./data";
 
export const BlogHeroImageBasic = () => {
  return <BlogHeroImage blogPosts={blogPosts} />;
};

Required Props

• blogPosts: Array of blog post objects to display

The component is designed to display a hero image along with a list of blog posts and incorporates a search input for filtering blog posts.