@eventcatalog/core 2.62.1 → 2.64.0

package/eventcatalog/src/components/SchemaExplorer/OwnersSection.tsx

@@ -0,0 +1,56 @@
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { UserIcon, UserGroupIcon } from '@heroicons/react/20/solid';
+import type { SchemaItem, Owner } from './types';
+
+interface OwnersSectionProps {
+  message: SchemaItem;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+export default function OwnersSection({ message, isExpanded, onToggle }: OwnersSectionProps) {
+  const owners = message.data.owners || [];
+
+  if (owners.length === 0) return null;
+
+  return (
+    <div className="flex-shrink-0 border-b border-gray-200">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <UserIcon className="h-4 w-4 text-gray-600" />
+          <span className="text-xs font-semibold text-gray-900">Owners</span>
+          <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+            {owners.length}
+          </span>
+        </div>
+        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+      </button>
+
+      {isExpanded && (
+        <div className="px-4 pb-2 bg-gray-50">
+          <div className="flex flex-wrap gap-2">
+            {owners.map((owner: Owner, idx: number) => {
+              const Icon = owner.type === 'users' ? UserIcon : UserGroupIcon;
+              return (
+                <a
+                  key={`${owner.id}-${idx}`}
+                  href={owner.href}
+                  className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 hover:shadow-sm transition-all"
+                  title={owner.name}
+                >
+                  <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-purple-500 to-purple-600 rounded-full">
+                    <Icon className="h-3 w-3 text-white" />
+                  </div>
+                  <span className="font-medium">{owner.name}</span>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/Pagination.tsx

@@ -0,0 +1,33 @@
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex-shrink-0 border-t border-gray-200 p-3 bg-gray-50">
+      <div className="flex items-center justify-between text-xs">
+        <button
+          onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+          disabled={currentPage === 1}
+          className="px-3 py-1.5 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Previous
+        </button>
+        <span className="text-gray-600">
+          Page {currentPage} of {totalPages}
+        </span>
+        <button
+          onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+          disabled={currentPage === totalPages}
+          className="px-3 py-1.5 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/ProducersConsumersSection.tsx

@@ -0,0 +1,91 @@
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ServerIcon } from '@heroicons/react/20/solid';
+import { buildUrl } from '@utils/url-builder';
+import type { SchemaItem, Producer, Consumer } from './types';
+
+interface ProducersConsumersSectionProps {
+  message: SchemaItem;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+export default function ProducersConsumersSection({ message, isExpanded, onToggle }: ProducersConsumersSectionProps) {
+  const producers = message.data.producers || [];
+  const consumers = message.data.consumers || [];
+  const totalCount = producers.length + consumers.length;
+
+  if (totalCount === 0) return null;
+
+  return (
+    <div className="flex-shrink-0 border-b border-gray-200">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 text-gray-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          <span className="text-xs font-semibold text-gray-900">Producers & Consumers</span>
+          <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+            {totalCount} services
+          </span>
+        </div>
+        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+      </button>
+
+      {isExpanded && (
+        <div className="px-4 pb-2 bg-gray-50">
+          {producers.length > 0 && (
+            <div className="mb-3">
+              <h4 className="text-xs font-semibold text-gray-900 mb-2">Producers ({producers.length})</h4>
+              <div className="flex flex-wrap gap-2">
+                {producers.map((producer: Producer, idx: number) => (
+                  <a
+                    key={`${producer.id}-${idx}`}
+                    href={buildUrl(`/docs/services/${producer.id}/${producer.version}`)}
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 hover:shadow-sm transition-all"
+                    title={`View ${producer.id}`}
+                  >
+                    <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">
+                      <ServerIcon className="h-3 w-3 text-white" />
+                    </div>
+                    <span className="font-medium">{producer.id}</span>
+                    <span className="text-gray-500 text-[11px]">v{producer.version}</span>
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+          {consumers.length > 0 && (
+            <div>
+              <h4 className="text-xs font-semibold text-gray-900 mb-2">Consumers ({consumers.length})</h4>
+              <div className="flex flex-wrap gap-2">
+                {consumers.map((consumer: Consumer, idx: number) => (
+                  <a
+                    key={`${consumer.id}-${idx}`}
+                    href={buildUrl(`/docs/services/${consumer.id}/${consumer.version}`)}
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 hover:shadow-sm transition-all"
+                    title={`View ${consumer.id}`}
+                  >
+                    <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">
+                      <ServerIcon className="h-3 w-3 text-white" />
+                    </div>
+                    <span className="font-medium">{consumer.id}</span>
+                    <span className="text-gray-500 text-[11px]">v{consumer.version}</span>
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/SchemaCodeModal.tsx

@@ -0,0 +1,93 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { XMarkIcon, ArrowsPointingOutIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight as syntaxHighlighterStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { getLanguageForHighlight } from './utils';
+import type { SchemaItem } from './types';
+
+interface SchemaCodeModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  message: SchemaItem;
+  onCopy: () => void;
+  isCopied: boolean;
+}
+
+export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy, isCopied }: SchemaCodeModalProps) {
+  if (!message.schemaContent) return null;
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+            <div className="flex items-center gap-3">
+              <ArrowsPointingOutIcon className="h-6 w-6 text-gray-500" />
+              <div>
+                <Dialog.Title className="text-xl font-semibold text-gray-900">{message.data.name}</Dialog.Title>
+                <Dialog.Description className="text-sm text-gray-600 mt-1">
+                  v{message.data.version} · {getLanguageForHighlight(message.schemaExtension).toUpperCase()}
+                </Dialog.Description>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onCopy}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors"
+                title="Copy code"
+              >
+                <ClipboardDocumentIcon className="h-4 w-4" />
+                {isCopied ? 'Copied!' : 'Copy'}
+              </button>
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                  aria-label="Close"
+                >
+                  <XMarkIcon className="h-6 w-6" />
+                </button>
+              </Dialog.Close>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-auto p-6">
+            <SyntaxHighlighter
+              language={getLanguageForHighlight(message.schemaExtension)}
+              style={syntaxHighlighterStyle}
+              customStyle={{
+                margin: 0,
+                padding: '1rem',
+                borderRadius: '0.5rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.6',
+                height: '100%',
+              }}
+              className="bg-white border border-gray-200 rounded-lg"
+              showLineNumbers={true}
+              wrapLines={true}
+              wrapLongLines={true}
+            >
+              {message.schemaContent}
+            </SyntaxHighlighter>
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end p-4 border-t border-gray-200 flex-shrink-0">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+              >
+                Close
+              </button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -0,0 +1,130 @@
+import { ClipboardDocumentIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight as syntaxHighlighterStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { buildUrl } from '@utils/url-builder';
+import JSONSchemaViewer from './JSONSchemaViewer';
+import AvroSchemaViewer from './AvroSchemaViewer';
+import { getLanguageForHighlight } from './utils';
+import type { SchemaItem } from './types';
+
+interface SchemaContentViewerProps {
+  message: SchemaItem;
+  onCopy: () => void;
+  isCopied: boolean;
+  viewMode: 'code' | 'schema' | 'diff';
+  parsedSchema: any;
+  parsedAvroSchema?: any;
+  onOpenFullscreen?: () => void;
+}
+
+export default function SchemaContentViewer({
+  message,
+  onCopy,
+  isCopied,
+  viewMode,
+  parsedSchema,
+  parsedAvroSchema,
+  onOpenFullscreen,
+}: SchemaContentViewerProps) {
+  if (!message.schemaContent) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-500">
+        <p className="text-sm">No schema content available</p>
+      </div>
+    );
+  }
+
+  // Render schema viewer based on schema type
+  if (viewMode === 'schema') {
+    if (parsedAvroSchema) {
+      return <AvroSchemaViewer schema={parsedAvroSchema} onOpenFullscreen={onOpenFullscreen} />;
+    }
+    if (parsedSchema) {
+      return <JSONSchemaViewer schema={parsedSchema} onOpenFullscreen={onOpenFullscreen} />;
+    }
+  }
+
+  return (
+    <div className="h-full overflow-auto p-3 relative bg-white border border-gray-200 rounded-lg">
+      <div className="absolute top-5 right-5 z-10 flex items-center gap-2">
+        {message.collection === 'services' &&
+          (() => {
+            const specType = message.specType || 'openapi';
+            const specFilename = message.specFilenameWithoutExtension || 'schema';
+
+            // Determine the URL path segment based on spec type
+            let urlSegment = 'spec';
+            if (specType === 'asyncapi') {
+              urlSegment = 'asyncapi';
+            } else if (specType === 'graphql') {
+              urlSegment = 'graphql';
+            }
+
+            const specUrl = buildUrl(`/docs/services/${message.data.id}/${message.data.version}/${urlSegment}/${specFilename}`);
+
+            return (
+              <a
+                href={specUrl}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+                title="View full specification"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-3.5 w-3.5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  />
+                </svg>
+                View Spec
+              </a>
+            );
+          })()}
+        {onOpenFullscreen && (
+          <button
+            onClick={onOpenFullscreen}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+            title="Open in fullscreen"
+          >
+            <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
+            Fullscreen
+          </button>
+        )}
+        <button
+          onClick={onCopy}
+          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+          title="Copy code"
+        >
+          <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+          {isCopied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={getLanguageForHighlight(message.schemaExtension)}
+        style={syntaxHighlighterStyle}
+        customStyle={{
+          margin: 0,
+          padding: '0.75rem',
+          paddingTop: '2.5rem',
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          lineHeight: '1.6',
+          height: '100%',
+          overflow: 'auto',
+        }}
+        className="bg-white border border-gray-200 rounded-lg"
+        showLineNumbers={true}
+        wrapLines={true}
+        wrapLongLines={true}
+      >
+        {message.schemaContent}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsHeader.tsx

@@ -0,0 +1,181 @@
+import { ClipboardDocumentIcon, ArrowDownTrayIcon, CodeBracketIcon, TableCellsIcon } from '@heroicons/react/24/outline';
+import { buildUrl } from '@utils/url-builder';
+import { getCollectionStyles } from '@components/Grids/utils';
+import { getSchemaTypeLabel } from './utils';
+import type { SchemaItem } from './types';
+
+interface SchemaDetailsHeaderProps {
+  message: SchemaItem;
+  availableVersions: SchemaItem[];
+  selectedVersion: string | null;
+  onVersionChange: (version: string) => void;
+  onCopy: () => void;
+  onDownload: () => void;
+  isCopied: boolean;
+  schemaViewMode: 'code' | 'schema' | 'diff';
+  onViewModeChange: (mode: 'code' | 'schema' | 'diff') => void;
+  hasParsedSchema: boolean;
+  hasDiffs: boolean;
+  diffCount: number;
+}
+
+export default function SchemaDetailsHeader({
+  message,
+  availableVersions,
+  selectedVersion,
+  onVersionChange,
+  onCopy,
+  onDownload,
+  isCopied,
+  schemaViewMode,
+  onViewModeChange,
+  hasParsedSchema,
+  hasDiffs,
+  diffCount,
+}: SchemaDetailsHeaderProps) {
+  const { color, Icon } = getCollectionStyles(message.collection);
+  const hasMultipleVersions = availableVersions.length > 1;
+
+  return (
+    <div className="flex-shrink-0 border-b border-gray-200 p-3">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Icon className={`h-5 w-5 text-${color}-500 flex-shrink-0`} />
+            <a
+              href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
+              className={`text-lg font-semibold text-gray-900 hover:text-${color}-600 hover:underline truncate`}
+            >
+              {message.data.name}
+            </a>
+            {hasMultipleVersions ? (
+              <select
+                value={selectedVersion || message.data.version}
+                onChange={(e) => onVersionChange(e.target.value)}
+                className="text-xs text-gray-700 bg-white border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+              >
+                {availableVersions.map((v) => (
+                  <option key={v.data.version} value={v.data.version}>
+                    v{v.data.version}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <span className="text-xs text-gray-500 flex-shrink-0">v{message.data.version}</span>
+            )}
+          </div>
+          <div className="flex items-center gap-1 mb-2">
+            <span
+              className={`inline-flex items-center rounded-full bg-${color}-100 px-1.5 py-0.5 text-xs font-medium text-${color}-800`}
+            >
+              {message.collection}
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800">
+              {(() => {
+                const ext = message.schemaExtension?.toLowerCase();
+                if (
+                  ext === 'openapi' ||
+                  ext === 'asyncapi' ||
+                  ext === 'graphql' ||
+                  ext === 'avro' ||
+                  ext === 'json' ||
+                  ext === 'proto'
+                ) {
+                  // Map json extension to json-schema icon
+                  const iconName = ext === 'json' ? 'json-schema' : ext;
+                  const iconPath = buildUrl(`/icons/${iconName}.svg`, true);
+                  return (
+                    <>
+                      <img src={iconPath} alt={`${ext} icon`} className="h-3 w-3" />
+                      {getSchemaTypeLabel(message.schemaExtension)}
+                    </>
+                  );
+                }
+                return getSchemaTypeLabel(message.schemaExtension);
+              })()}
+            </span>
+          </div>
+          {message.data.summary && <p className="text-xs text-gray-600 line-clamp-2">{message.data.summary}</p>}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-2">
+        {/* View Mode Toggle */}
+        <div className="flex items-center gap-1 mr-2 border-r border-gray-300 pr-2">
+          <button
+            onClick={() => onViewModeChange('code')}
+            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
+              schemaViewMode === 'code' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+            }`}
+            title="Code view"
+          >
+            <CodeBracketIcon className="h-3.5 w-3.5" />
+            Code
+          </button>
+          {hasParsedSchema && (
+            <button
+              onClick={() => onViewModeChange('schema')}
+              className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
+                schemaViewMode === 'schema' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+              }`}
+              title="Schema view"
+            >
+              <TableCellsIcon className="h-3.5 w-3.5" />
+              Schema
+            </button>
+          )}
+          {hasDiffs && (
+            <button
+              onClick={() => onViewModeChange('diff')}
+              className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
+                schemaViewMode === 'diff' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+              }`}
+              title="View version history diffs"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-3.5 w-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+              Diff ({diffCount})
+            </button>
+          )}
+        </div>
+
+        <button
+          onClick={onCopy}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+          title="Copy schema to clipboard"
+        >
+          <ClipboardDocumentIcon className="h-4 w-4" />
+          {isCopied ? 'Copied!' : 'Copy'}
+        </button>
+        <button
+          onClick={onDownload}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+          title="Download schema file"
+        >
+          <ArrowDownTrayIcon className="h-4 w-4" />
+          Download
+        </button>
+        <a
+          href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors ml-auto"
+          title="View full documentation"
+        >
+          View Docs →
+        </a>
+      </div>
+    </div>
+  );
+}