Safari

import { Safari } from '@hanzo/ui'

export function Default() {
  return (
    <Safari url="https://ui.hanzo.ai">
      <YStack height={240} items="center" justify="center">
        <YStack width="60%" height={12} rounded="$2" bg="$color4" />
      </YStack>
    </Safari>
  )
}

export function WithoutToolbar() {
  return (
    <Safari url="https://ui.hanzo.ai/docs" showToolbar={false}>
      <YStack height={200} items="center" justify="center">
        <YStack width="40%" height={12} rounded="$2" bg="$color4" />
      </YStack>
    </Safari>
  )
}

export function CustomUrl() {
  return (
    <Safari url="https://example.com/dashboard">
      <YStack height={220} items="center" justify="center">
        <YStack width="70%" height={12} rounded="$2" bg="$color4" />
      </YStack>
    </Safari>
  )
}

Types

export type SafariToolbarItem = 'favorites' | 'reading-list' | 'history'

export type SafariProps = {
  children?: ReactNode
  /** Shown in the URL pill. */
  url?: string
  /** The Favorites / Reading List / History row under the address bar. */
  showToolbar?: boolean
  onBack?: () => void
  onForward?: () => void
  onReload?: () => void
  onShare?: () => void
  onNewTab?: () => void
  onMenu?: () => void
  /** Fires with which secondary-toolbar item was pressed. */
  onToolbarItemPress?: (item: SafariToolbarItem) => void
}

Exports