hanzo.ai/components/home/OpenSource.tsx

'use client'

import { useState } from 'react'
import { ArrowRight, Star } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { Text, View, XStack } from '@hanzo/ui'
import { Action } from '@hanzo/ui/marketing'
import oss from '@/lib/data/oss.json'
import recency from '@/lib/data/oss-pushed.json'
import { Section } from './chrome'
import Activity from '@/components/oss/Activity'
import ForgeBetaBanner from './ForgeBetaBanner'
import RepoCard, { GithubMark, ForgeMark } from '@/components/oss/RepoCard'
import BulkStarModal from '@/components/oss/BulkStarModal'

type Repo = { repo: string; line: string; language: string }

/** The 16 featured core repositories */
const FEATURED_16: readonly Repo[] = [
  { repo: 'hanzoai/ai', line: phrase('Model routing and OpenAI-compatible API'), language: 'Go' },
  { repo: 'hanzoai/engine', line: phrase('High-performance model inference'), language: 'Rust' },
  { repo: 'hanzoai/cloud', line: phrase('Open AI cloud infrastructure'), language: 'Go' },
  { repo: 'hanzoai/dev', line: phrase('Autonomous coding agent'), language: 'Rust' },
  { repo: 'hanzoai/base', line: phrase('The data layer: a database per org, live updates and files.'), language: 'Go' },
  { repo: 'hanzoai/iam', line: phrase('Identity: sign-in, organizations, roles and API keys.'), language: 'Go' },
  { repo: 'hanzoai/kms', line: phrase('Secrets, held encrypted and handed out at runtime.'), language: 'Go' },
  { repo: 'hanzoai/commerce', line: phrase('Billing: plans, subscriptions, usage metering and invoices.'), language: 'Go' },
  { repo: 'hanzoai/s3', line: phrase('S3-compatible object storage.'), language: 'Go' },
  { repo: 'hanzoai/ui', line: phrase('The component kit every Hanzo app is built with.'), language: 'TypeScript' },
  { repo: 'hanzoai/mcp', line: phrase('An MCP server with hundreds of tools for agents.'), language: 'Rust' },
  { repo: 'hanzoai/ml', line: phrase('The tensor and ML framework, on CPU, CUDA, Metal and ROCm.'), language: 'Rust' },
  { repo: 'hanzoai/ci', line: phrase('The CI and deploys every repository ships with.'), language: 'Shell' },
  { repo: 'hanzoai/enso', line: phrase('Examples and recipes for Enso, the router.'), language: 'Rust' },
  { repo: 'hanzoai/kai', line: phrase('Examples and recipes for Kai decisions.'), language: 'TypeScript' },
  { repo: 'hanzoai/zen', line: phrase('Zen open models, with examples to run them anywhere.'), language: 'Rust' },
]

const PUBLIC = new Set(oss.public as string[])
const PUSHED = recency.pushed as Record<string, string | null>

type Order = 'name' | 'recent'

function Pick({ on, label, set }: { on: boolean; label: string; set: () => void }) {
  return (
    <XStack
      render={<button type="button" aria-pressed={on} onClick={set} />}
      px={12}
      py={5}
      rounded={6}
      bg={on ? 'var(--foreground)' : 'transparent'}
      cursor="pointer"
      hoverStyle={on ? undefined : { bg: 'var(--secondary)' }}
      $platform-web={{ borderRadius: '6px', border: 'none' }}
    >
      <Text fontSize="$2" lineHeight="$2" fontWeight="500" color={on ? 'var(--background)' : 'var(--muted-foreground)'}>
        {label}
      </Text>
    </XStack>
  )
}

export default function OpenSource() {
  const { t } = useI18n()
  const [order, setOrder] = useState<Order>('name')
  const [modalOpen, setModalOpen] = useState(false)

  const core = [...FEATURED_16].filter((r) => PUBLIC.has(r.repo)).sort((a, b) =>
    order === 'recent' ? String(PUSHED[b.repo] ?? '').localeCompare(String(PUSHED[a.repo] ?? '')) : a.repo.localeCompare(b.repo),
  )

  return (
    <Section id="open-source" label="Open.Source" title={t('We ship every day.')}>
      <Activity />

      <ForgeBetaBanner />

      <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
        <XStack gap={10} items="center">
          <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
            {t('Sort')}
          </Text>
          <XStack role="group" aria-label={t('Sort repositories')} gap={2} p={3} rounded={9} borderWidth={1} borderColor="var(--border)" $platform-web={{ borderRadius: '9px' }}>
            <Pick on={order === 'name'} label={t('A–Z')} set={() => setOrder('name')} />
            <Pick on={order === 'recent'} label={t('Recently updated')} set={() => setOrder('recent')} />
          </XStack>
        </XStack>

        <XStack items="center" gap={10} flexWrap="wrap" maxW="100%">
          <Action render="button" type="button" onClick={() => setModalOpen(true)}>
            <Star size={13} aria-hidden />
            {t('Star the featured')}
          </Action>
          <Action href="https://github.com/hanzoai" target="_blank" rel="noopener noreferrer">
            <GithubMark size={14} color="var(--foreground)" />
            {t('Follow Hanzo')}
          </Action>
          <Action href="https://github.com/hanzoai" fill target="_blank" rel="noopener noreferrer">
            <Star size={14} aria-hidden />
            {t('Star on GitHub')}
          </Action>
        </XStack>
      </XStack>

      <View
        display="grid"
        width="100%"
        gap={12}
        gridTemplateColumns="minmax(0, 1fr)"
        $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
        $lg={{ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))' }}
      >
        {core.map((r) => (
          <RepoCard key={r.repo} repo={r.repo} line={r.line} language={r.language} />
        ))}
      </View>

      <XStack items="center" justify="space-between" width="100%" flexWrap="wrap" gap={12}>
        <XStack items="center" gap={10}>
          <Text fontSize="$2" color="var(--muted-foreground)">
            {t('Follow development')}
          </Text>
          <XStack render={<a href="https://github.com/hanzoai" target="_blank" rel="noopener noreferrer" title="Follow on GitHub" />} p={4} rounded={6} hoverStyle={{ bg: 'var(--secondary)' }} $platform-web={{ textDecoration: 'none' }}>
            <GithubMark size={16} color="var(--foreground)" />
          </XStack>
          <XStack render={<a href="https://forge.hanzo.ai/hanzoai" target="_blank" rel="noopener noreferrer" title="Follow on Hanzo Forge" />} p={4} rounded={6} hoverStyle={{ bg: 'var(--secondary)' }} $platform-web={{ textDecoration: 'none' }}>
            <ForgeMark size={16} color="var(--foreground)" />
          </XStack>
        </XStack>

        <XStack render={<a href="/open-source" />} items="center" gap={6} cursor="pointer" $platform-web={{ textDecoration: 'none' }}>
          <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
            {t('View all')}
          </Text>
          <ArrowRight size={14} color="var(--foreground)" aria-hidden data-i18n-mirror="" />
        </XStack>
      </XStack>

      <BulkStarModal open={modalOpen} onClose={() => setModalOpen(false)} repositories={FEATURED_16} />
    </Section>
  )
}