hanzo.ai/components/analytics/OpenSource.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { Github } from "@/components/brand"
import { Band, FADE } from '@/components/marketing/band'
import { Action, Lede, Title } from '@hanzo/ui/marketing'
import { Dots, Lattice, ink } from './kit'
import { Box, Text, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { useI18n } from '@hanzo/i18n/react'

/** The sample's inks, one per role: a keyword, punctuation and strings, a name, the plain rest, and a comment. */
const INK = {
  key: 'var(--foreground)',
  punct: ink(70),
  name: ink(60),
  plain: 'var(--foreground)',
  note: 'var(--muted-foreground)',
} as const

/** A run of the sample in one role's ink. */
function T({ k, children }: { k: keyof typeof INK; children: React.ReactNode }) {
  return <Text color="inherit" $platform-web={{ color: INK[k] }}>{children}</Text>
}

/** The listing's face: mono at the small rung. */
const CODE = { fontFamily: '$mono', fontSize: '$2', lineHeight: '1.25rem' } as const

/** One numbered line of the listing. */
function Line({ n, children }: { n: number; children?: React.ReactNode }) {
  return (
    <XStack>
      <Text mr={16} {...CODE} $platform-web={{ color: 'color-mix(in oklab, var(--muted-foreground) 60%, transparent)' }}>
        {n}
      </Text>
      <Text {...CODE} whiteSpace="normal" color="var(--muted-foreground)">
        {children}
      </Text>
    </XStack>
  )
}

const OpenSource = () => {
  const { t } = useI18n()
  return (
    <Band rule={false} pad="$14" measure={1152} ground={FADE}>
      <Lattice size={30} opacity={0.02} />

      <Box position="relative" z="var(--z-raised)">
        <Grid columns={{ min: 420, max: 2 }} gap={64} items="center">
          <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }}>
            <Title mb={24}>{t('Open Source at Our Core')}</Title>
            <Lede mb={32}>
              {t('Hanzo Analytics is fully open-source, fostering innovation and collaboration among thousands of global developers.')}
            </Lede>

            <XStack flexWrap="wrap" gap="$4">
              <Action href="https://docs.hanzo.ai" target="_blank" rel="noopener noreferrer">
                <Github size={16} />
                {t('View Docs')}
              </Action>
              <Action href="https://github.com/hanzoai" target="_blank" rel="noopener noreferrer">
                <Github size={16} />
                {t('View Repository')}
              </Action>
            </XStack>
          </motion.div>

          <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }}>
            <Box
              rounded={16}
              overflow="hidden"
              borderWidth={1}
              borderColor="var(--neutral-800)"
              boxShadow="var(--shadow-xl)"
              $platform-web={{ background: 'linear-gradient(to bottom right, var(--muted), var(--background))' }}
            >
              <XStack items="center" p="$4" bg="var(--muted)" borderBottomWidth={1} borderColor="var(--neutral-800)" gap="$4">
                <Dots />
                <Text flex={1} text="center" fontSize="$2" lineHeight="1.15rem" $platform-web={{ color: ink(80) }}>
                  analytics.js
                </Text>
              </XStack>

              <Box p="$5" overflowX="auto" $platform-web={{ textAlign: 'left' }}>
                <Line n={1}>
                  <T k="key">import</T> <T k="punct">{'{'}</T> <T k="name">HanzoAnalytics</T> <T k="punct">{'}'}</T> <T k="key">from</T>{' '}
                  <T k="punct">&apos;hanzo-analytics&apos;</T>;
                </Line>
                <Line n={2} />
                <Line n={3}>
                  <T k="note">{'// Initialize analytics with your project ID'}</T>
                </Line>
                <Line n={4}>
                  <T k="key">const</T> analytics <T k="plain">=</T> <T k="key">new</T> <T k="name">HanzoAnalytics</T>
                  <T k="plain">(</T>
                  <T k="punct">&apos;YOUR_PROJECT_ID&apos;</T>
                  <T k="plain">);</T>
                </Line>
                <Line n={5} />
                <Line n={6}>
                  <T k="note">{'// Track page views automatically'}</T>
                </Line>
                <Line n={7}>
                  <T k="plain">analytics.trackPageViews();</T>
                </Line>
                <Line n={8} />
                <Line n={9}>
                  <T k="note">{'// Track custom events'}</T>
                </Line>
                <Line n={10}>
                  <T k="plain">analytics.track(</T>
                  <T k="punct">&apos;button_click&apos;</T>
                  <T k="plain">, {'{'}</T>
                </Line>
                <Line n={11}>
                  <T k="plain">{'  buttonId: '}</T>
                  <T k="punct">&apos;signup_button&apos;</T>
                  <T k="plain">,</T>
                </Line>
                <Line n={12}>
                  <T k="plain">{'  page: '}</T>
                  <T k="punct">&apos;/home&apos;</T>
                </Line>
                <Line n={13}>
                  <T k="plain">{'}'});</T>
                </Line>
              </Box>
            </Box>
          </motion.div>
        </Grid>
      </Box>
    </Band>
  );
};

export default OpenSource;