Company Profile

import { CompanyProfile } from '@hanzo/ui'

export function Default() {
  return <CompanyProfile symbol="NASDAQ:AAPL" />
}

export function LightAndTransparent() {
  return (
    <CompanyProfile
      symbol="NASDAQ:MSFT"
      colorTheme="light"
      isTransparent
      height={320}
      rounded="$3"
    />
  )
}

export function SeveralSymbols() {
  return (
    <YStack gap="$4">
      <CompanyProfile symbol="NASDAQ:AAPL" height={320} />
      <CompanyProfile symbol="NASDAQ:GOOGL" height={320} />
    </YStack>
  )
}

export function Controlled() {
  const symbols = ["NASDAQ:AAPL", "NASDAQ:MSFT", "BINANCE:ETHUSDT"]
  const [symbol, setSymbol] = useState(symbols[0])
  return (
    <YStack gap="$3">
      <XStack gap="$2" flexWrap="wrap">
        {symbols.map((s) => (
          <Button
            key={s}
            size="sm"
            variant={s === symbol ? "primary" : "outline"}
            onPress={() => setSymbol(s)}
          >
            {s}
          </Button>
        ))}
      </XStack>
      <CompanyProfile symbol={symbol} height={420} />
    </YStack>
  )
}

Types

export type CompanyProfileTheme = 'light' | 'dark'

export interface CompanyProfileProps extends Omit<YStackProps, 'width' | 'height' | 'colorTheme'> {
  /** The symbol to describe, exchange-qualified. */
  symbol?: string
  width?: string | number
  height?: string | number
  locale?: string
  /** The widget's own palette; independent of the surrounding gui theme. */
  colorTheme?: CompanyProfileTheme
  isTransparent?: boolean
}

Exports