Buttons

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsSolidDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
      <Button variant="light">Light</Button>
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsOutlineDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button variant="outline-primary">Primary</Button>
      <Button variant="outline-secondary">Secondary</Button>
      <Button variant="outline-success">Success</Button>
      <Button variant="outline-danger">Danger</Button>
      <Button variant="outline-warning">Warning</Button>
      <Button variant="outline-info">Info</Button>
      <Button variant="outline-light">Light</Button>
      <Button variant="outline-dark">Dark</Button>
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsStaticIconsDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button>
        <i className="ci-thumbs-up fs-base me-2 ms-n1"/>
        Like
      </Button>

      <Button variant="outline-secondary">
        Send
        <i className="ci-send fs-base ms-2 me-n1"/>
      </Button>

      <Button variant="success" className="btn-icon fs-lg" aria-label="Notifications">
        <i className="ci-bell"/>
      </Button>

      <Button variant="secondary" className="btn-icon fs-lg rounded-circle" aria-label="Settings">
        <i className="ci-settings"/>
      </Button>

      <Button variant="outline-danger" className="btn-icon fs-base rounded-circle" aria-label="Favorite">
        <i className="ci-heart"/>
      </Button>
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsAnimatedIconsDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button className="animate-scale">
        <i className="ci-thumbs-up animate-target fs-base me-2 ms-n1"/>
        Like
      </Button>

      <Button variant="outline-secondary" className="animate-slide-end">
        Send
        <i className="ci-send animate-target fs-base ms-2 me-n1"/>
      </Button>

      <Button variant="success" className="btn-icon animate-shake fs-lg" aria-label="Notifications">
        <i className="ci-bell animate-target"/>
      </Button>

      <Button
        variant="secondary"
        className="btn-icon animate-rotate fs-lg rounded-circle"
        aria-label="Settings"
      >
        <i className="ci-settings animate-target"/>
      </Button>

      <Button
        variant="outline-danger"
        className="btn-icon animate-pulse fs-base rounded-circle"
        aria-label="Favorite"
      >
        <i className="ci-heart animate-target"/>
      </Button>
    </Stack>
  )
}

import MarketButton from '@/components/market-button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsMarketDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <MarketButton href="#" market="google" variant="dark" aria-label="Download on Google Play" />
      <MarketButton href="#" market="google" variant="dark" large aria-label="Download on Google Play" />
    </Stack>

    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <MarketButton href="#" market="apple" variant="dark" aria-label="Download on App Store" />
      <MarketButton href="#" market="apple" variant="dark" large aria-label="Download on App Store" />
    </Stack>

    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <MarketButton
        href="#"
        market="google"
        variant="light"
        large
        className="rounded-pill"
        aria-label="Download on Google Play"
      />
      <MarketButton
        href="#"
        market="apple"
        variant="light"
        large
        className="rounded-pill"
        aria-label="Download on App Store"
      />
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsTagsDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button as="a" href="#">Link</Button>
      <Button type="submit">Button</Button>
      <Button as="input" type="reset" value="Input" />
      <Button as="span">Span</Button>
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsShapesDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Button>Rounded</Button>
      <Button className="rounded-pill">Pill button</Button>
      <Button className="rounded-0">Square</Button>
    </Stack>
  )
}

import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonsSizesDemo() {
  return (
    <>
      <Stack direction="horizontal" gap={2} className="flex-wrap mb-3">
        <Button size="lg">Large button</Button>
        <Button>Normal button</Button>
        <Button size="sm">Small button</Button>
      </Stack>
      <Button className="w-100">Block level button</Button>
    </>
  )
}