gui/apps/gui.hanzo.ai/features/docs/Highlights.tsx

import { ExternalLink } from '@hanzogui/lucide-icons-2'
import React from 'react'
import {
  H2,
  Paragraph,
  SizableText,
  Text,
  VisuallyHidden,
  XStack,
  YStack,
} from '@hanzo/gui'
import { Features } from '~/components/Features'
import { Link } from '~/components/Link'
import { FrontmatterContext } from './FrontmatterContext'
import { SourceVersionSwitcher } from './SourceVersionSwitcher'

export function Highlights({ features, disableLinks, disableTitle, large }: any) {
  const frontmatter = React.useContext(FrontmatterContext)
  // Use the version from frontmatter (loaded from path)
  const sourceVersion = frontmatter.version || frontmatter.versions?.[0]

  return (
    <YStack
      mb="$2"
      $gtSm={{
        fd: 'row',
        justifyContent: 'space-between',
      }}
      {...(disableTitle && {
        mt: 0,
      })}
    >
      <YStack
        minH={142}
        $gtSm={{
          flex: 1,
          maxW: disableLinks ? '100%' : 400,
          mr: '$5',
        }}
      >
        {!disableTitle && (
          <H2 fontFamily="$body" size="$6" mb="$1" fontWeight="800">
            Features
          </H2>
        )}

        <YStack render="ul" p={0} m={0} gap="$4">
          <Features large={large} items={features} />
        </YStack>
      </YStack>

      {!disableLinks && (
        <YStack
          gap="$3"
          render="nav"
          aria-labelledby="site-component-info-header"
          minW={140}
        >
          <VisuallyHidden>
            <h2 id="site-component-info-heading">Component Reference Links</h2>
          </VisuallyHidden>
          <YStack mt={disableTitle ? '$3' : '$6'} my="$3" gap="$3">
            {frontmatter.versions && frontmatter.versions.length > 1 && (
              <SourceVersionSwitcher
                versions={frontmatter.versions}
                componentName={frontmatter.name || frontmatter.component || ''}
              />
            )}

            <Link
              href={`https://github.com/hanzoai/gui/tree/${sourceVersion ? `v${sourceVersion}` : 'main'}/pkgs/ui/${
                frontmatter.package
                  ? `${frontmatter.package}/src/${frontmatter.component}.tsx`
                  : `hanzogui/src/views/${frontmatter.component}.tsx`
              }`}
              target="_blank"
            >
              <XStack items="center" gap="$1">
                <SizableText size="$3">View source</SizableText>
                <YStack opacity={0.5} ml="$0.5">
                  <ExternalLink size={12} color="var(--colorHover)" />
                </YStack>
              </XStack>
            </Link>
            <Link href={`https://www.npmjs.com/package/hanzogui`} target="_blank">
              <XStack items="center" gap="$1">
                <SizableText size="$3">View on npm</SizableText>
                <YStack opacity={0.5} ml="$0.5">
                  <ExternalLink size={12} color="var(--colorHover)" />
                </YStack>
              </XStack>
            </Link>
            <Link href="https://github.com/hanzoai/gui/issues/new/choose" target="_blank">
              <XStack items="center" gap="$1">
                <SizableText size="$3">Report an issue</SizableText>
                <YStack opacity={0.5} ml="$0.5">
                  <ExternalLink size={12} color="var(--colorHover)" />
                </YStack>
              </XStack>
            </Link>

            {/* @ts-ignore */}
            {frontmatter.aria && (
              <YStack mb="$2">
                {/* @ts-ignore */}
                <Link theme="blue" href={frontmatter.aria} target="_blank">
                  <XStack position="relative">
                    <Paragraph size="$2" color="$color10">
                      ARIA design pattern
                    </Paragraph>
                    <YStack ml="$1">
                      <Text color="$color9">
                        <ExternalLink size={12} color="var(--color)" />
                      </Text>
                    </YStack>
                  </XStack>
                </Link>
              </YStack>
            )}
          </YStack>
        </YStack>
      )}
    </YStack>
  )
}