revamp template

src/partials/misc/MiscHighlightedPosts.tsx

@@ -0,0 +1,67 @@
+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
+};