<Center><Text>Easy</Text><Divider my="$0.5" /><Text>Difficult</Text></Center>
import { Divider } from "@gluestack-ui/themed"
export default () => <Divider />
Name | Value | Default |
---|---|---|
orientation | vertical | horizontal | horizontal |
<VStack space="md" justifyContent="center" alignItems="center"><HStack h="$10" justifyContent="center" alignItems="center"><Text>Simple</Text><Dividerorientation="vertical"mx="$2.5"bg="$emerald500"h={15}sx={{_dark: {bg: "$emerald400",},}}/><Text>Easy</Text><Dividerorientation="vertical"mx="$2.5"bg="$indigo500"h={15}sx={{_dark: {bg: "$indigo400",},}}/><Text>Beautiful</Text></HStack><VStack w={100} justifyContent="center" alignItems="center"><Text>Firefox</Text><Dividerw={55}variant="horizontal"sx={{bg: "$red500",_dark: {bg: "$red400",},}}/><Text>Chrome</Text></VStack></VStack>
<VStackspace="lg"p="$12"borderColor="$backgroundLight300"borderWidth="$1"rounded="$lg"mx="$5"sx={{_dark: {borderColor: "$backgroundDark700",},}}><Box><Text size="xs" color="$darkBlue600" fontWeight="$bold">HEALTH</Text><Heading>Benefits of Oranges</Heading><Text size="sm" mt="$1.5">Oranges are a great source of vitamin C, which is essential for a healthyimmune system.</Text><HStack space="sm" mt="$3" h="$5"><Text size="xs">Wade Warrem</Text><Divider orientation="vertical" bg="$trueGray300" /><Text size="xs">6th Oct, 2019</Text><Divider orientation="vertical" bg="$trueGray300" /><Text size="xs">5 mins read</Text></HStack></Box><Dividersx={{bg: "$trueGray300",_dark: {bg: "$backgroundDark700",},}}/><Box><Text size="xs" color="$darkBlue600" fontWeight="$bold">TECHNOLOGY</Text><Heading>How AI can benefit your business</Heading><Text size="sm" mt="$1.5">AI can automate tasks and processes, allowing for increasing efficiencyand productivity.</Text><HStack space="sm" mt="$3" h="$5"><Text size="xs">Wade Warrem</Text><Divider orientation="vertical" bg="$trueGray300" /><Text size="xs">6th Oct, 2019</Text><Divider orientation="vertical" bg="$trueGray300" /><Text size="xs">5 mins read</Text></HStack></Box></VStack>
<VStack space="2xl"><HStackpx="$3"h="$8"rounded="$sm"borderWidth="$1"borderColor="$backgroundLight300"sx={{_dark: {borderColor: "$backgroundDark700",},}}><Button variant="link" size="xs"><ButtonText>Github</ButtonText></Button><Divider orientation="vertical" mx="$2.5" /><Button variant="link" size="xs"><ButtonText>Twitter</ButtonText></Button><Divider orientation="vertical" mx="$2.5" /><Button variant="link" size="xs"><ButtonText>Discord</ButtonText></Button></HStack><HStackpx="$3"h="$8"rounded="$sm"borderWidth="$1"borderColor="$backgroundLight300"alignItems="center"sx={{_dark: {borderColor: "$backgroundDark700",},}}><Button variant="link" size="xs"><ButtonText>Github</ButtonText></Button><Divider orientation="vertical" h="50%" mx="$2.5" /><Button variant="link" size="xs"><ButtonText>Twitter</ButtonText></Button><Divider orientation="vertical" h="50%" mx="$2.5" /><Button variant="link" size="xs"><ButtonText>Discord</ButtonText></Button></HStack></VStack>
<Boxpy="$9"px="$20"m="$5"rounded="$lg"borderColor="$backgroundLight300"borderWidth="$1"sx={{_dark: {borderColor: "$backgroundDark700",},}}><Heading size="3xl">Search Results</Heading><Divider mt="$4" mb="$6" /><Box><Text size="xs" color="$amber700" fontWeight="$bold">TECHNOLOGY</Text><Heading>How AI can benefit your business</Heading><Text size="sm" mt="$1.5">AI can automate tasks and processes, allowing for increasing efficiencyand productivity.</Text><HStack space="sm" mt="$3" alignItems="center"><Divider bg="$amber700" w={18} /><Text size="xs" color="$amber700">5 mins read</Text></HStack></Box></Box>