import React from 'react'
import { Link } from 'playbook-ui'

const LinkColor = (props) => (
  <div>
    <div>
      <Link
          href="https://www.google.com/search?q=playbook+design+system"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="body"
          href="https://www.youtube.com/@PowerHRG"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="muted"
          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
          text="link example"
      />
    </div>
    <div>
      <Link
          color="destructive"
          href="https://rubygems.org/gems/playbook_ui/"
          text="link example"
      />
    </div>
  </div>
)

export default LinkColor

import React from 'react'
import { Link } from 'playbook-ui'

const LinkUnderline = (props) => (
  <div>
    <Link
        href="#underline"
        text="link example"
        underline
    />
  </div>
)

export default LinkUnderline

import React from 'react'
import { Link } from 'playbook-ui'

const LinkIcon = (props) => (
  <div>
    <div>
      <Link
          href="#icon"
          icon="arrow-up-right-from-square"
          text="link example"
      />
    </div>
    <div>
      <Link
          href="#icon2"
          iconRight="chevron-right"
          text="link example"
      />
    </div>
  </div>
)

export default LinkIcon

import React from 'react'
import { Link } from 'playbook-ui'

const LinkDisabled = (props) => (
  <div>
    <Link
        disabled
        href="#disabled"
        text="link example"
    />
  </div>
)

export default LinkDisabled

import React from 'react'
import { Link } from 'playbook-ui'

const LinkTag = (props) => (
  <div>
    <Link
        href="#tag"
        icon="arrow-up-right-from-square"
        tag="h1"
        text="h1 link example"
    />
    <Link
        href="#tag2"
        tag="h3"
        text="h3 link example"
        underline
    />
    <Link
        color="destructive"
        href="#tag3"
        tag="h6"
        text="h6 link example"
    />
    <Link
        href="#tag4"
        iconRight="chevron-right"
        tag="p"
        text="p link example"
    />
    <div>
      This is a <Link
          href="#tag5"
          tag="span"
          text="span link example"
    />
    </div>
  </div>
)

export default LinkTag

import React from 'react'
import { Link } from 'playbook-ui'

const LinkTarget = (props) => (
  <div>
    <div>
      <Link
          aria={{ label: 'Link to Google in new window' }}
          href="https://google.com"
          tabIndex={0}
          target='blank'
          text="Open In New Window"
      />
    </div>
    <div>
      <Link
          aria={{ label: 'Link to Playbook in a child tab' }}
          href="https://playbook.powerapp.cloud/"
          tabIndex={0}
          target='child'
          text="Open In Child Tab"
      />
    </div>
  </div>
)

export default LinkTarget