health blog

 import { useHealthBlogs } from './hooks'

import { Grid, Card, Text } from '@ebh/capsule';

import { useNavigate } from "react-router";

export default function index() {

let navigate = useNavigate();

const { data, isLoading, error } = useHealthBlogs();

if (isLoading) return <div>Loading...</div>;

if (error) return <div>Error loading health blogs.</div>;

if (data) {

console.log(data);

}

return (

<>

<div style={{ paddingTop: 30, paddingRight: 91, paddingLeft: 91, paddingBottom: 30 }}>

<Text variant='header-1'>Health library</Text>

<Text variant='sub-heading-1'>All your helpful content at one place</Text>

</div>

{data?.health_blogs?.length ? (

<Grid

cols={1}

gap={16}

lg={4}

md={4}

sm={2}

xl={4}

style={{ paddingRight: 96, paddingLeft: 96 }}

>

{data.health_blogs.map((blog, index) => (

<Card

key={index}

cover={<img src={blog.blog_image} style={{

width: 294,

height: 127,

borderTopLeftRadius: 12,

borderTopRightRadius: 12,

}}

/>}

hoverable

style={{

width: 294,

height: 295,

borderRadius: 12,

}}

>

<div style={{

paddingRight: 16,

paddingLeft: 16,

display: 'flex',

flexDirection: 'column',

// background: 'pink',

gap: 4,

}}>

<div style={{

// backgroundColor:'blue'

}}>

<Text variant='label-4'

style={{

whiteSpace: 'nowrap',

overflow: 'hidden',

textOverflow: 'ellipsis',

width: '100%',

display: 'block',

}}

>{blog.title}</Text>

</div>

<div style={{

height: 82,

// background: 'green'

}}>

<Text variant='header-4' style={{

overflow: 'hidden',

display: '-webkit-box',

WebkitLineClamp: 2,

WebkitBoxOrient: 'vertical',

lineHeight: '1.3em',

wordWrap: 'break-word',

}}>{blog.description}</Text>

<Text>{blog.display_month}</Text>

</div>

<div style={{

// background: 'red'

}}>

{/* <a href={blog.blog_file}> */}

<Text variant='body-4' color='success-400'

onClick={() => {

// console.log('redirect to next page')

navigate(`/vhcportal/corporatebenefits/healthblog/${blog.title}`);

}}

>Read more</Text>

{/* </a> */}

</div>

</div>

</Card>

))}

</Grid>

) : (

<p>No blogs available.</p>

)}

</>

)

}

blog:-----

import { useEffect } from "react";

import { useParams } from "react-router"

import { useHealthBlogs } from './hooks'

import { HealthBlog } from "./type";

export default function BlogDetail() {

let {blogtitle} = useParams();

const { data} = useHealthBlogs();

console.log('radhe',data);

// Fix type: expect blogs to be an array

const findBlogIndexByTitle = (

blogs: HealthBlog[],

title: string

): number => {

return blogs.findIndex((blog) => blog?.title === title);

};

useEffect(() => {

if (data && blogtitle) {

const index = findBlogIndexByTitle(data?.health_blogs, blogtitle);

console.log("Found index:", index);

}

}, [data, blogtitle]);

return (

<div>blog-details </div>

)

}