Chakra UI Fields - Horizon UI

function InputField() {
  return (
    <Flex direction="column" mb="30px">
      <FormLabel
        display="flex"
        ms="10px"
        htmlFor="username"
        fontSize="sm"
        color={useColorModeValue("#1B2559", "white")}
        fontWeight="bold"
        _hover={{ cursor: "pointer" }}
      >
        Username
      </FormLabel>
      <Input
        bg="transparent"
        border="1px solid"
        color={useColorModeValue("#1B2559", "white")}
        borderColor={useColorModeValue("#E0E5F2", "whiteAlpha.100")}
        borderRadius="16px"
        fontSize="sm"
        p="20px"
        id="username"
        fontWeight="500"
        variant="main"
        placeholder="@simmmple.web"
        _placeholder={{ fontWeight: "400", color: "#A3AED0" }}
        h="44px"
        maxh="44px"
      />
    </Flex>
  )
}

import InputField from "components/fields/InputField"

<InputField
  mb="0px"
  me="30px"
  id="username"
  label="Username"
  placeholder="@simmmple.web"
/>

function SwitchField() {
  return (
    <Flex direction="row" justify="space-between">
      <Text
        fontSize="sm"
        color={useColorModeValue("#1B2559", "white")}
        fontWeight="bold"
      >
        Item update notifications
      </Text>
      <Switch colorScheme="brand" size="md" />
    </Flex>
  )
}

import SwitchField from "components/fields/SwitchField"

<SwitchField
  isChecked={true}
  reversed={true}
  fontSize="sm"
  mb="20px"
  id="1"
  label="Item update notifications"
/>

function TextField() {
  return (
    <Flex direction="column">
      <FormLabel
        display="flex"
        ms="10px"
        htmlFor="about"
        fontSize="sm"
        color={useColorModeValue("#1B2559", "white")}
        fontWeight="bold"
        _hover={{ cursor: "pointer" }}
      >
        About me
      </FormLabel>
      <Textarea
        id="about"
        placeholder="Tell something about yourself in 150 characters!"
        h="44px"
        maxh="44px"
        color={useColorModeValue("#1B2559", "white")}
        fontSize="sm"
        bg="transparent"
        border="1px solid "
        borderColor={useColorModeValue("#E0E5F2", "whiteAlpha.100")}
        borderRadius="16px"
        _placeholder={{ color: "#A3AED0" }}
      />
    </Flex>
  )
}

import TextField from "components/fields/TextField"

<TextField
  id="about"
  label="About Me"
  placeholder="Tell something about yourself in 150 characters!"
/>

function TagsField(props) {
  const { label, id, placeholderTags, ...rest } = props
  let initialTags = [
    {
      name: "chakra-ui",
      id: 1,
    },
    {
      name: "react",
      id: 2,
    },
    {
      name: "javascript",
      id: 3,
    },
  ]
  if (placeholderTags) initialTags = placeholderTags
  const [tags, setTags] = useState(initialTags)
  const keyPress = (e) => {
    if (e.keyCode === 13) {
      setTags([
        ...tags,
        {
          name: e.target.value,
          id: tags.length === 0 ? 1 : tags[tags.length - 1].id + 1,
        },
      ])
      e.target.value = ""
    }
  }
  let borderColor = useColorModeValue("secondaryGray.100", "whiteAlpha.100")
  let bg = useColorModeValue("brand.500", "brand.400")
  return (
    <Box>
      <FormLabel htmlFor="description" fontWeight="bold" fontSize="sm" mb="8px">
        Description
      </FormLabel>
      <Flex
        direction="row"
        p="12px"
        wrap="wrap"
        bg="transparent"
        border="1px solid"
        borderColor={useColorModeValue("#E0E5F2", "whiteAlpha.100")}
        borderRadius="16px"
        minH="40px"
        h="stretch"
        cursor="text"
      >
        {tags.map((tag, index) => {
          return (
            <Tag
              fontSize="xs"
              h="25px"
              mb="6px"
              me="6px"
              borderRadius="12px"
              variant="solid"
              bg="brand.400"
              key="index"
            >
              <TagLabel w="100%">{tag.name}</TagLabel>
              <TagCloseButton
                justifySelf="flex-end"
                color="white"
                onClick={() =>
                  setTags([...tags.filter((element) => element.id !== tag.id)])
                }
              />
            </Tag>
          )
        })}
        <Input
          variant="main"
          bg="transparent"
          border="none"
          _focus="none"
          p="0px"
          onKeyDown={(e) => keyPress(e)}
          fontSize="sm"
        />
      </Flex>
    </Box>
  )
}

import TagsField from "components/fields/TagsField"

<TagsField
  id="description"
  label="Description"
  placeholderTags={[
    {
      name: "chair",
      id: 1,
    },
    {
      name: "furniture",
      id: 2,
    },
    {
      name: "elegant",
      id: 3,
    },
  ]}
/>