React & React Native Components & Patterns

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$primary700",
    px: "$6",
    py: "$3",
    rounded: "$md",
    _dark: {
      bg: "$primary600",
    },
  })
  const ButtonText = styled(Text, {
    textAlign: "center",
    fontSize: "$md",
    lineHeight: "$md",
    color: "$white",
  })

  return (
    <Provider config={config}>
      <StyledButton>
        <ButtonText>Hello</ButtonText>
      </StyledButton>
    </Provider>
  )
}

function App() {
  const Button = styled(
    Pressable,
    {
      px: "$3.5",
      py: "$2.5",
      rounded: "$md",
      variants: {
        variant: {
          outlined: {
            bg: "transparent",
            borderWidth: "$1",
            borderColor: "$blue500",
            _text: {
              color: "$blue300",
            },
          },
          subtle: {
            bg: "$blue800",
            _text: {
              color: "$white",
            },
          },
          solid: {
            bg: "$blue600",
            _text: {
              color: "$white",
            },
          },
        },
      },
      defaultProps: {
        variant: "solid",
      },
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const ButtonText = styled(
    Text,
    {
      textAlign: "center",
      fontSize: "$md",
      lineHeight: "$md",
    },
    { ancestorStyle: ["_text"] }
  )

  return (
    <Provider config={config}>
      <View style={{ flexDirection: "row", gap: 16 }}>
        <Button variant="outlined">
          <ButtonText>Outlined</ButtonText>
        </Button>
        <Button variant="subtle">
          <ButtonText>Subtle</ButtonText>
        </Button>
        <Button variant="solid">
          <ButtonText>Solid</ButtonText>
        </Button>
      </View>
    </Provider>
  )
}

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$indigo600",
    px: "$6",
    py: "$3",
    rounded: "$md",
    ":hover": {
      bg: "$indigo500",
    },
    ":active": {
      bg: "$indigo600",
    },
  })
  const ButtonText = styled(Text, {
    color: "$white",
    fontSize: "$md",
    lineHeight: "$md",
    textAlign: "center",
  })

  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)

  return (
    <Provider config={config}>
      <StyledButton
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <ButtonText>Hover Me!</ButtonText>
      </StyledButton>
    </Provider>
  )
}

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$primary600",
    px: "$6",
    py: "$3",
    rounded: "$md",
    _web: {
      bg: "$violet600",
    },
    _ios: {
      bg: "$emerald500",
    },
    _android: {
      bg: "$pink500",
    },
  })
  const ButtonText = styled(Text, {
    textAlign: "center",
    fontSize: "$md",
    lineHeight: "$md",
    color: "$white",
  })

  return (
    <Provider config={config}>
      <StyledButton>
        <ButtonText>Hey there!</ButtonText>
      </StyledButton>
    </Provider>
  )
}

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$primary600",
    px: "$6",
    py: "$3",
    rounded: "$md",
    _dark: {
      bg: "$teal600",
    },
    _light: {
      bg: "$teal500",
    },
  })

  const ButtonText = styled(Text, {
    textAlign: "center",
    fontSize: "$md",
    lineHeight: "$md",
    color: "$white",
  })

  return (
    <Provider config={config}>
      <StyledButton>
        <ButtonText>Button</ButtonText>
      </StyledButton>
    </Provider>
  )
}

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$primary500",
    p: "$3",
    rounded: "$md",
    shadow: "$4",
    ":hover": {
      bg: "$primary600",
    },
    ":active": {
      bg: "$primary700",
    },
    "@md": {
      bg: "$indigo500",
      ":hover": {
        bg: "$indigo600",
      },
      ":active": {
        bg: "$indigo700",
      },
    },
  })
  const ButtonText = styled(Text, {
    textAlign: "center",
    fontSize: "$md",
    lineHeight: "$md",
    color: "$white",
  })

  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)
  return (
    <Provider config={config}>
      <StyledButton
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <ButtonText>Click Me</ButtonText>
      </StyledButton>
    </Provider>
  )
}

function App() {
  const StyledButton = styled(
    Pressable,
    {
      bg: "$primary600",
      px: "$6",
      py: "$4",
      _text: {
        color: "$white",
      },
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const StyledButtonText = styled(
    Text,
    {
      color: "$black",
      fontWeight: "700",
    },
    { ancestorStyle: ["_text"] }
  )

  return (
    <Provider config={config}>
      <StyledButton bg="$primary600">
        <StyledButtonText>Hello world</StyledButtonText>
      </StyledButton>
    </Provider>
  )
}