{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React from 'react';\nimport { Text, useMediaQuery, Box, Heading, Image, AspectRatio, Center, Stack, HStack } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nexport var Example = function Example() {\n  var _useMediaQuery = useMediaQuery([{\n    orientation: 'landscape'\n  }, {\n    orientation: 'portrait'\n  }]),\n      _useMediaQuery2 = _slicedToArray(_useMediaQuery, 2),\n      isLandScape = _useMediaQuery2[0],\n      isPortrait = _useMediaQuery2[1];\n\n  return _jsxs(Box, {\n    children: [isPortrait ? _jsxs(Box, {\n      rounded: \"lg\",\n      overflow: \"hidden\",\n      shadow: 1,\n      borderWidth: \"1\",\n      _light: {\n        backgroundColor: 'gray.50',\n        borderColor: 'coolGray.200'\n      },\n      _dark: {\n        borderColor: 'coolGray.600',\n        backgroundColor: 'gray.700'\n      },\n      children: [_jsxs(Box, {\n        children: [_jsx(AspectRatio, {\n          ratio: 16 / 9,\n          children: _jsx(Image, {\n            source: {\n              uri: 'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg'\n            },\n            alt: \"image\"\n          })\n        }), _jsx(Center, {\n          bg: \"violet.500\",\n          _text: {\n            color: 'white',\n            fontWeight: '700',\n            fontSize: 'xs'\n          },\n          position: \"absolute\",\n          bottom: 0,\n          px: \"3\",\n          py: \"1.5\",\n          children: \"PHOTOS\"\n        })]\n      }), _jsxs(Stack, {\n        p: \"4\",\n        space: 3,\n        children: [_jsxs(Stack, {\n          space: 2,\n          children: [_jsx(Heading, {\n            size: \"md\",\n            ml: \"-1\",\n            children: \"The Garden City\"\n          }), _jsx(Text, {\n            fontSize: \"xs\",\n            _light: {\n              color: 'violet.500'\n            },\n            _dark: {\n              color: 'violet.300'\n            },\n            fontWeight: \"500\",\n            ml: \"-0.5\",\n            mt: \"-1\",\n            children: \"The Silicon Valley of India.\"\n          })]\n        }), _jsx(Text, {\n          fontWeight: \"400\",\n          children: \"Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\"\n        }), _jsx(HStack, {\n          alignItems: \"center\",\n          space: 4,\n          justifyContent: \"space-between\",\n          children: _jsx(HStack, {\n            alignItems: \"center\",\n            children: _jsx(Text, {\n              color: \"gray.500\",\n              fontWeight: \"400\",\n              children: \"6 mins ago\"\n            })\n          })\n        })]\n      })]\n    }) : _jsx(_Fragment, {}), isLandScape ? _jsx(HStack, {\n      rounded: \"lg\",\n      overflow: \"hidden\",\n      shadow: 1,\n      _light: {\n        backgroundColor: 'gray.50'\n      },\n      _dark: {\n        backgroundColor: 'gray.700'\n      },\n      children: _jsxs(Stack, {\n        p: \"2\",\n        pt: \"3\",\n        flex: \"2\",\n        space: 1,\n        children: [_jsxs(Stack, {\n          space: 2,\n          children: [_jsx(Heading, {\n            size: \"md\",\n            ml: \"-1\",\n            children: \"The Garden City\"\n          }), _jsx(Text, {\n            fontSize: \"xs\",\n            _light: {\n              color: 'violet.500'\n            },\n            _dark: {\n              color: 'violet.300'\n            },\n            fontWeight: \"500\",\n            ml: \"-0.5\",\n            mt: \"-1\",\n            children: \"The Silicon Valley of India.\"\n          })]\n        }), _jsx(Text, {\n          fontSize: \"xs\",\n          fontWeight: \"400\",\n          children: \"Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\"\n        }), _jsx(HStack, {\n          alignItems: \"center\",\n          space: 4,\n          justifyContent: \"space-between\",\n          children: _jsx(HStack, {\n            alignItems: \"center\",\n            children: _jsx(Text, {\n              _dark: {\n                color: 'warmGray.200'\n              },\n              fontSize: \"xs\",\n              color: \"gray.500\",\n              fontWeight: \"400\",\n              children: \"6 mins ago\"\n            })\n          })\n        })]\n      })\n    }) : _jsx(_Fragment, {})]\n  });\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/hooks/useMediaQuery/orientation.tsx"],"names":["React","Text","useMediaQuery","Box","Heading","Image","AspectRatio","Center","Stack","HStack","Example","orientation","isLandScape","isPortrait","backgroundColor","borderColor","uri","color","fontWeight","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Text,\n  useMediaQuery,\n  Box,\n  Heading,\n  Image,\n  AspectRatio,\n  Center,\n  Stack,\n  HStack,\n} from 'native-base';\n\nexport const Example = () => {\n  const [isLandScape, isPortrait] = useMediaQuery([\n    { orientation: 'landscape' },\n    { orientation: 'portrait' },\n  ]);\n  return (\n    <Box>\n      {isPortrait ? (\n        <Box\n          rounded=\"lg\"\n          overflow=\"hidden\"\n          shadow={1}\n          borderWidth=\"1\"\n          _light={{ backgroundColor: 'gray.50', borderColor: 'coolGray.200' }}\n          _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}\n        >\n          <Box>\n            <AspectRatio ratio={16 / 9}>\n              <Image\n                source={{\n                  uri:\n                    'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',\n                }}\n                alt=\"image\"\n              />\n            </AspectRatio>\n            <Center\n              bg=\"violet.500\"\n              _text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}\n              position=\"absolute\"\n              bottom={0}\n              px=\"3\"\n              py=\"1.5\"\n            >\n              PHOTOS\n            </Center>\n          </Box>\n          <Stack p=\"4\" space={3}>\n            <Stack space={2}>\n              <Heading size=\"md\" ml=\"-1\">\n                The Garden City\n              </Heading>\n              <Text\n                fontSize=\"xs\"\n                _light={{ color: 'violet.500' }}\n                _dark={{ color: 'violet.300' }}\n                fontWeight=\"500\"\n                ml=\"-0.5\"\n                mt=\"-1\"\n              >\n                The Silicon Valley of India.\n              </Text>\n            </Stack>\n            <Text fontWeight=\"400\">\n              Bengaluru (also called Bangalore) is the center of India's\n              high-tech industry. The city is also known for its parks and\n              nightlife.\n            </Text>\n            <HStack\n              alignItems=\"center\"\n              space={4}\n              justifyContent=\"space-between\"\n            >\n              <HStack alignItems=\"center\">\n                <Text color=\"gray.500\" fontWeight=\"400\">\n                  6 mins ago\n                </Text>\n              </HStack>\n            </HStack>\n          </Stack>\n        </Box>\n      ) : (\n        <></>\n      )}\n      {isLandScape ? (\n        <HStack\n          rounded=\"lg\"\n          overflow=\"hidden\"\n          shadow={1}\n          _light={{ backgroundColor: 'gray.50' }}\n          _dark={{ backgroundColor: 'gray.700' }}\n        >\n          <Stack p=\"2\" pt=\"3\" flex=\"2\" space={1}>\n            <Stack space={2}>\n              <Heading size=\"md\" ml=\"-1\">\n                The Garden City\n              </Heading>\n              <Text\n                fontSize=\"xs\"\n                _light={{ color: 'violet.500' }}\n                _dark={{ color: 'violet.300' }}\n                fontWeight=\"500\"\n                ml=\"-0.5\"\n                mt=\"-1\"\n              >\n                The Silicon Valley of India.\n              </Text>\n            </Stack>\n            <Text fontSize=\"xs\" fontWeight=\"400\">\n              Bengaluru (also called Bangalore) is the center of India's\n              high-tech industry. The city is also known for its parks and\n              nightlife.\n            </Text>\n            <HStack\n              alignItems=\"center\"\n              space={4}\n              justifyContent=\"space-between\"\n            >\n              <HStack alignItems=\"center\">\n                <Text\n                  _dark={{ color: 'warmGray.200' }}\n                  fontSize=\"xs\"\n                  color=\"gray.500\"\n                  fontWeight=\"400\"\n                >\n                  6 mins ago\n                </Text>\n              </HStack>\n            </HStack>\n          </Stack>\n        </HStack>\n      ) : (\n        <></>\n      )}\n    </Box>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}