feat(docs): introduce FeatureCard component and refactor GuidesSection to utilize it

Author: lukasz-hycom

apps/docs/src/components/FeatureCard/index.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import Badge from '../Badge';
+import { BodyBold, BodySmall } from '../Typography';
+
+export interface FeatureCardProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    badge?: string;
+    className?: string;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description, badge, className }) => {
+    return (
+        <div className={clsx('card-base', className)}>
+            <div className="flex justify-between p-6 w-full h-full">
+                <div className="flex gap-6 flex-1 w-full">
+                    {icon && <div className="flex items-center justify-center">{icon}</div>}
+
+                    <div className="flex flex-col gap-2">
+                        <BodyBold className="m-0!">{title}</BodyBold>
+                        {description && <BodySmall className="m-0!">{description}</BodySmall>}
+                    </div>
+                </div>
+
+                {badge && (
+                    <div className="shrink-0 ml-2">
+                        <Badge title={badge} variant="secondary" />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

apps/docs/src/components/GuidesSection/index.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
 import HistoryIcon from '../../assets/icons/History.svg';
-import Badge from '../Badge';
-import { Body, BodyBold, BodySmall, H2, H3 } from '../Typography';
+import { FeatureCard } from '../FeatureCard';
+import { Body, BodySmall, H2, H3 } from '../Typography';
 
 export interface Guide {
     title: string;
@@ -40,20 +40,12 @@ export const GuidesSection: React.FC<GuidesSectionProps> = ({ title, guides, inf
                 <ul className="list-none p-0! m-0! flex flex-col gap-4 w-full">
                     {guides.map((guide, index) => (
                         <li key={index}>
-                            <div className={clsx('card-base')}>
-                                <div className={`flex justify-between p-6 w-full h-full`}>
-                                    <div className="self-center mr-6">{guide.icon}</div>
-
-                                    <div className={`flex flex-col gap-2`}>
-                                        <BodyBold className="m-0!">{guide.title}</BodyBold>
-                                        <BodySmall className="m-0!">{guide.description}</BodySmall>
-                                    </div>
-
-                                    <div className="shrink-0 ml-2">
-                                        <Badge title={guide.badge} variant="secondary" />
-                                    </div>
-                                </div>
-                            </div>
+                            <FeatureCard
+                                icon={guide.icon}
+                                title={guide.title}
+                                description={guide.description}
+                                badge={guide.badge}
+                            />
                         </li>
                     ))}
                 </ul>