68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { KeenIcon } from '@/components';
|
|
import { CommonHexagonBadge } from '../common';
|
|
|
|
interface IHighlightedPostsItem {
|
|
icon: string;
|
|
title: string;
|
|
summary: string;
|
|
path: string;
|
|
}
|
|
interface IHighlightedPostsItems extends Array<IHighlightedPostsItem> {}
|
|
|
|
interface IHighlightedPostsProps {
|
|
posts: IHighlightedPostsItem[];
|
|
}
|
|
|
|
const MiscHighlightedPosts = ({ posts }: IHighlightedPostsProps) => {
|
|
const renderItem = (post: IHighlightedPostsItem, index: number) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<div className="flex flex-col items-start gap-2.5">
|
|
<div className="mb-2.5">
|
|
<CommonHexagonBadge
|
|
stroke="stroke-brand-clarity"
|
|
fill="fill-brand-light"
|
|
size="size-[50px]"
|
|
badge={<KeenIcon icon={post.icon} className="text-1.5xl ps-px text-brand" />}
|
|
/>
|
|
</div>
|
|
|
|
<Link
|
|
to={`${post.path}`}
|
|
className="text-base font-semibold text-gray-900 hover:text-primary"
|
|
>
|
|
{post.title}
|
|
</Link>
|
|
|
|
<p className="text-sm text-gray-700">{post.summary}</p>
|
|
|
|
<Link to={`${post.path}`} className="btn btn-link flex-none">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
|
|
<span className="hidden [&:not(:last-child)]:block [&:not(:last-child)]:border-b border-b-gray-200"></span>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="card">
|
|
<div className="card-body py-10 flex flex-col gap-5 lg:gap-7.5">
|
|
{posts.map((post, index) => {
|
|
return renderItem(post, index);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export {
|
|
MiscHighlightedPosts,
|
|
type IHighlightedPostsItem,
|
|
type IHighlightedPostsItems,
|
|
type IHighlightedPostsProps
|
|
};
|