@geminilight/mindos 0.5.28 → 0.5.30

package/app/components/explore/ExploreContent.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState } from 'react';
+import { useLocale } from '@/lib/LocaleContext';
+import { useCases, categories, type UseCaseCategory } from './use-cases';
+import UseCaseCard from './UseCaseCard';
+
+export default function ExploreContent() {
+  const { t } = useLocale();
+  const e = t.explore;
+  const [activeCategory, setActiveCategory] = useState<UseCaseCategory | 'all'>('all');
+
+  const filtered = activeCategory === 'all'
+    ? useCases
+    : useCases.filter(uc => uc.category === activeCategory);
+
+  /** Type-safe lookup for use case i18n data by id */
+  const getUseCaseText = (id: string): { title: string; desc: string; prompt: string } | undefined => {
+    const map: Record<string, { title: string; desc: string; prompt: string }> = {
+      c1: e.c1, c2: e.c2, c3: e.c3, c4: e.c4, c5: e.c5,
+      c6: e.c6, c7: e.c7, c8: e.c8, c9: e.c9,
+    };
+    return map[id];
+  };
+
+  return (
+    <div className="content-width px-4 md:px-6 py-8 md:py-12">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
+          <h1
+            className="text-2xl font-semibold tracking-tight font-display"
+            style={{ color: 'var(--foreground)' }}
+          >
+            {e.title}
+          </h1>
+        </div>
+        <p
+          className="text-sm leading-relaxed"
+          style={{ color: 'var(--muted-foreground)', paddingLeft: '1rem' }}
+        >
+          {e.subtitle}
+        </p>
+      </div>
+
+      {/* Category tabs */}
+      <div className="flex flex-wrap gap-2 mb-6" style={{ paddingLeft: '1rem' }}>
+        <CategoryChip
+          label={e.all}
+          active={activeCategory === 'all'}
+          onClick={() => setActiveCategory('all')}
+        />
+        {categories.map(cat => (
+          <CategoryChip
+            key={cat}
+            label={(e.categories as Record<string, string>)[cat]}
+            active={activeCategory === cat}
+            onClick={() => setActiveCategory(cat)}
+          />
+        ))}
+      </div>
+
+      {/* Card grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" style={{ paddingLeft: '1rem' }}>
+        {filtered.map(uc => {
+          const data = getUseCaseText(uc.id);
+          if (!data) return null;
+          return (
+            <UseCaseCard
+              key={uc.id}
+              icon={uc.icon}
+              title={data.title}
+              description={data.desc}
+              prompt={data.prompt}
+              tryItLabel={e.tryIt}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function CategoryChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150
+        ${active
+          ? 'text-[var(--amber)] bg-[var(--amber-dim)]'
+          : 'text-[var(--muted-foreground)] bg-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--muted)]/80'
+        }
+      `}
+    >
+      {label}
+    </button>
+  );
+}

package/app/components/explore/UseCaseCard.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { openAskModal } from '@/hooks/useAskModal';
+
+interface UseCaseCardProps {
+  icon: string;
+  title: string;
+  description: string;
+  prompt: string;
+  tryItLabel: string;
+}
+
+export default function UseCaseCard({ icon, title, description, prompt, tryItLabel }: UseCaseCardProps) {
+  return (
+    <div
+      className="group flex flex-col gap-3 p-4 rounded-xl border transition-all duration-150 hover:border-amber-500/30 hover:bg-muted/50"
+      style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+    >
+      <div className="flex items-start gap-3">
+        <span className="text-xl leading-none shrink-0 mt-0.5" suppressHydrationWarning>
+          {icon}
+        </span>
+        <div className="flex-1 min-w-0">
+          <h3
+            className="text-sm font-semibold font-display truncate"
+            style={{ color: 'var(--foreground)' }}
+          >
+            {title}
+          </h3>
+          <p
+            className="text-xs leading-relaxed mt-1 line-clamp-2"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            {description}
+          </p>
+        </div>
+      </div>
+      <button
+        onClick={() => openAskModal(prompt, 'user')}
+        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer"
+        style={{
+          background: 'var(--amber-dim)',
+          color: 'var(--amber)',
+        }}
+      >
+        {tryItLabel} →
+      </button>
+    </div>
+  );
+}

package/app/components/explore/use-cases.ts

@@ -0,0 +1,30 @@
+export type UseCaseCategory = 'getting-started' | 'cross-agent' | 'knowledge-evolution' | 'advanced';
+
+export interface UseCase {
+  id: string;
+  icon: string;
+  category: UseCaseCategory;
+}
+
+/**
+ * C1-C9 use case definitions.
+ * All display text (title, description, prompt) comes from i18n — this file is structure only.
+ */
+export const useCases: UseCase[] = [
+  { id: 'c1', icon: '👤', category: 'getting-started' },
+  { id: 'c2', icon: '📥', category: 'getting-started' },
+  { id: 'c3', icon: '🔄', category: 'cross-agent' },
+  { id: 'c4', icon: '🔁', category: 'knowledge-evolution' },
+  { id: 'c5', icon: '💡', category: 'cross-agent' },
+  { id: 'c6', icon: '🚀', category: 'cross-agent' },
+  { id: 'c7', icon: '🔍', category: 'knowledge-evolution' },
+  { id: 'c8', icon: '🤝', category: 'knowledge-evolution' },
+  { id: 'c9', icon: '🛡️', category: 'advanced' },
+];
+
+export const categories: UseCaseCategory[] = [
+  'getting-started',
+  'cross-agent',
+  'knowledge-evolution',
+  'advanced',
+];