feat(04-01): implement MarketplaceCard component and marketplace i18n namespace

- Add marketplace namespace to de.json and en.json with all copywriting contract strings - Add sidebar.search and sidebar.noResults i18n keys - Create MarketplaceCard with icon, name, localized description, category badge, status badge (role="status"), and activate/deactivate button - All 5 unit tests pass (GREEN phase)
2026-06-22 14:47:53 +02:00
parent a64f889251
commit 1e494b36ea
3 changed files with 203 additions and 0 deletions
@@ -0,0 +1,141 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+/**
+ * Props for the MarketplaceCard component.
+ */
+export interface MarketplaceCardProps {
+  id: string;
+  name: string;
+  slug: string;
+  description: Record<string, string>;
+  icon?: string;
+  category: string;
+  isActive: boolean;
+  isToggling: boolean;
+  onToggle: (id: string, currentlyActive: boolean) => void;
+}
+
+/**
+ * Default icon mapping for known module icons.
+ * Renders inline SVG to avoid external icon library dependency.
+ */
+function ModuleIcon({ icon }: { icon?: string }) {
+  if (icon === 'Globe') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-primary"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+        <path d="M2 12h20" />
+      </svg>
+    );
+  }
+
+  // Default puzzle-piece icon for generic modules
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-primary"
+    >
+      <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
+    </svg>
+  );
+}
+
+/**
+ * Marketplace card showing a module with activation controls.
+ *
+ * Displays module name, localized description, category badge,
+ * status badge, and an activate/deactivate button. Following the
+ * ModuleCard pattern from Phase 3 with marketplace-specific extensions.
+ */
+export function MarketplaceCard({
+  id,
+  name,
+  slug,
+  description,
+  icon,
+  category,
+  isActive,
+  isToggling,
+  onToggle,
+}: MarketplaceCardProps) {
+  const t = useTranslations('marketplace');
+  const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
+  const localizedDescription = description[locale] || description.en || description.de || '';
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30" style={{ minHeight: '180px' }}>
+      {/* Header: icon + name + badges */}
+      <div className="flex items-start gap-3 mb-3">
+        <div className="rounded-md bg-muted p-2.5 shrink-0">
+          <ModuleIcon icon={icon} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="font-semibold text-base leading-tight truncate">{name}</h3>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+              {category}
+            </span>
+            <span
+              role="status"
+              className={`rounded-full px-2 py-0.5 text-xs ${
+                isActive
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {isActive ? t('statusActive') : t('statusAvailable')}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground line-clamp-2 mb-4">
+        {localizedDescription}
+      </p>
+
+      {/* Footer: action button */}
+      <div className="flex items-center justify-end">
+        <button
+          onClick={() => onToggle(id, isActive)}
+          disabled={isToggling}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-wait disabled:opacity-50 ${
+            isActive
+              ? 'border border-border text-foreground hover:bg-muted'
+              : 'bg-primary text-primary-foreground'
+          }`}
+        >
+          {isToggling ? (
+            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : isActive ? (
+            t('deactivate')
+          ) : (
+            t('activate')
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}