@eventcatalog/core 2.7.11 → 2.7.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.7.12
+
+### Patch Changes
+
+- 3016b7f: feat(core): added tile MDX components
+
 ## 2.7.11
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.7.11",
+  "version": "2.7.12",
   "publishConfig": {
     "access": "public"
   },

package/src/components/MDX/Tiles/Tile.astro

@@ -0,0 +1,35 @@
+---
+import type { ComponentType } from 'react';
+import * as Icons from '@heroicons/react/24/solid';
+import { buildUrl } from '@utils/url-builder-client';
+
+interface Props {
+  href: string;
+  icon: keyof typeof Icons;
+  title: string;
+  openWindow?: boolean;
+  description: string;
+}
+
+const { href, icon, title, description, openWindow } = Astro.props;
+
+const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[icon];
+---
+
+<a
+  href={buildUrl(href)}
+  target={openWindow ? '_blank' : '_self'}
+  class="block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-500 focus:ring-white"
+>
+  <div class="flex flex-col h-full space-y-8">
+    {IconComponent && <IconComponent className="w-6 h-6 text-purple-500" />}
+    <div>
+      <h2 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
+        {title}
+      </h2>
+      <p class="text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm">
+        {description}
+      </p>
+    </div>
+  </div>
+</a>

package/src/components/MDX/Tiles/Tiles.astro

@@ -0,0 +1,10 @@
+---
+const { title } = Astro.props;
+---
+
+<sectio class="not-prose">
+  {title && <h2 class="text-2xl font-bold text-gray-800 mb-4">{title}</h2>}
+  <div class={`grid grid-cols-1 md:grid-cols-2 gap-4 w-full not-prose`}>
+    <slot />
+  </div>
+</sectio>

package/src/components/MDX/components.tsx

@@ -4,6 +4,8 @@ import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Flow from '@components/MDX/Flow/Flow.astro';
+import Tiles from '@components/MDX/Tiles/Tiles.astro';
+import Tile from '@components/MDX/Tiles/Tile.astro';
 import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
@@ -19,6 +21,8 @@ const components = (props: any) => {
     Flow,
     OpenAPI,
     AsyncAPI,
+    Tiles,
+    Tile,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),