<commit_before>import React from 'react'
import { Section } from '@components/v2/section'
import { Box, Flex } from 'blockstack-ui'
import { useHover } from 'use-events'

import ArrowUpRightIcon from 'mdi-react/ArrowUpRightIcon'
import DownloadIcon from 'mdi-react/DownloadIcon'

const items = [
  {
    platform: 'Web',
    description: 'No install. Recommended for most users',
    href: 'https://browser.blockstack.org/',
    icon: ArrowUpRightIcon
  },
  {
    platform: 'MacOS',
    description: 'Requires Sierra 10.12+',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-macOS-v0.36.1.dmg'
  },
  {
    platform: 'Windows',
    description: 'Requires Windows 10',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-win10-v0.36.1.msi'
  },
  {
    platform: 'Linux',
    description: 'Advanced install',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-Linux-v0.36.1.sh'
  }
]

const InstallItem = ({
  platform,
  description,
  icon: Icon = DownloadIcon,
  href
}) => {
  const [hovered, bind] = useHover()
  return (
    <Flex
      width={1}
      pb={3}
      mb={3}
      borderBottom="1px solid"
      borderColor="sky.50"
      alignItems="center"
      justifyContent="flex-start"
      is="a"
      style={{
        textDecoration: 'none'
      }}
      href={href}
      target="_blank"
      flexDirection={['column', 'row', 'column', 'row']}
      {...bind}
    >
      <Flex alignItems="center" minWidth={['100%', '50%', '100%', '50%']}>
        <Box
          opacity={hovered ? 1 : 0.5}
          color={hovered ? 'blue' : 'ink'}
          pr={2}
          pt={1}
        >
          <Icon size={18} style={{ display: 'block' }} />
        </Box>
        <Box pr={5} flexShink={0}>
          <Section.Title
            style={{ whiteSpace: 'nowrap' }}
            color={hovered ? 'blue' : 'ink'}
            is="h3"
          >
            Browser {platform}
          </Section.Title>
        </Box>
      </Flex>
      <Box minWidth={['100%', '50%', '100%', '50%']} flexShink={0} flexGrow={1}>
        <Section.Text fontSize={1}>{description}</Section.Text>
      </Box>
    </Flex>
  )
}

const Install = (props) =>
  items.map((item, key) => <InstallItem key={key} {...item} />)

const installSection = {
  variant: 'white',
  minHeight: '400px',
  py: 8,
  panes: [
    {
      justifyContent: 'flex-start',
      panes: [
        {
          justifyContent: 'flex-start',
          text: {
            children:<commit_msg>install title h3 -> h4<commit_after>import React from 'react'
import { Section } from '@components/v2/section'
import { Box, Flex } from 'blockstack-ui'
import { useHover } from 'use-events'

import ArrowUpRightIcon from 'mdi-react/ArrowUpRightIcon'
import DownloadIcon from 'mdi-react/DownloadIcon'

const items = [
  {
    platform: 'Web',
    description: 'No install. Recommended for most users',
    href: 'https://browser.blockstack.org/',
    icon: ArrowUpRightIcon
  },
  {
    platform: 'MacOS',
    description: 'Requires Sierra 10.12+',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-macOS-v0.36.1.dmg'
  },
  {
    platform: 'Windows',
    description: 'Requires Windows 10',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-win10-v0.36.1.msi'
  },
  {
    platform: 'Linux',
    description: 'Advanced install',
    href:
      'https://github.com/blockstack/blockstack-browser/releases/download/v0.36.1/Blockstack-for-Linux-v0.36.1.sh'
  }
]

const InstallItem = ({
  platform,
  description,
  icon: Icon = DownloadIcon,
  href
}) => {
  const [hovered, bind] = useHover()
  return (
    <Flex
      width={1}
      pb={3}
      mb={3}
      borderBottom="1px solid"
      borderColor="sky.50"
      alignItems="center"
      justifyContent="flex-start"
      is="a"
      style={{
        textDecoration: 'none'
      }}
      href={href}
      target="_blank"
      flexDirection={['column', 'row', 'column', 'row']}
      {...bind}
    >
      <Flex alignItems="center" minWidth={['100%', '50%', '100%', '50%']}>
        <Box
          opacity={hovered ? 1 : 0.5}
          color={hovered ? 'blue' : 'ink'}
          pr={2}
          pt={1}
        >
          <Icon size={18} style={{ display: 'block' }} />
        </Box>
        <Box pr={5} flexShink={0}>
          <Section.Title
            style={{ whiteSpace: 'nowrap' }}
            color={hovered ? 'blue' : 'ink'}
            is="h4"
          >
            Browser {platform}
          </Section.Title>
        </Box>
      </Flex>
      <Box minWidth={['100%', '50%', '100%', '50%']} flexShink={0} flexGrow={1}>
        <Section.Text fontSize={1}>{description}</Section.Text>
      </Box>
    </Flex>
  )
}

const Install = (props) =>
  items.map((item, key) => <InstallItem key={key} {...item} />)

const installSection = {
  variant: 'white',
  minHeight: '400px',
  py: 8,
  panes: [
    {
      justifyContent: 'flex-start',
      panes: [
        {
          justifyContent: 'flex-start',
          text: {
            children:
{'fraction_non_alphanumeric': 0.1720921378260042, 'fraction_numerical': 0.02931658100133257, 'mean_word_length': 2.3253164556962025, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 42, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '337201', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1790, 'n_words': 338}