{"componentChunkName":"component---src-templates-block-js","path":"/blocks/headers/logo","result":{"data":{"block":{"id":"9f96bc08-53d3-581e-9381-5121222beebd","displayName":"HeaderLogo","src":"/** @jsx jsx */\nimport { jsx } from 'theme-ui'\nimport { Link } from '@theme-ui/components'\nimport { ControlType, applyPropertyControls } from 'property-controls'\n\nconst HeaderLogo = ({ justifyContent = 'space-between', ...props }) => {\n  return (\n    <header\n      sx={{\n        variant: 'styles.header',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent\n      }}\n      {...props}\n    />\n  )\n}\n\nHeaderLogo.Logo = ({ to, ...props }) => {\n  return (\n    <Link\n      sx={{\n        variant: 'styles.navLink',\n        p: 2\n      }}\n      to={to}\n      {...props}\n    >\n      <img\n        alt=\"Logo\"\n        src=\"https://contrast.now.sh/white/black?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI\"\n        sx={{\n          verticalAlign: 'middle'\n        }}\n        {...props}\n      />\n      <span\n        sx={{\n          position: 'absolute',\n          width: 1,\n          height: 1,\n          overflow: 'hidden',\n          top: -9999\n        }}\n      >\n        Home\n      </span>\n    </Link>\n  )\n}\nHeaderLogo.Nav = props => {\n  return <nav {...props} />\n}\nHeaderLogo.Link = props => {\n  return (\n    <Link\n      sx={{\n        variant: 'styles.navLink',\n        p: 2\n      }}\n      {...props}\n    />\n  )\n}\n\napplyPropertyControls(HeaderLogo, {\n  justifyContent: {\n    type: ControlType.Enum,\n    defaultValue: 'right',\n    options: ['space-between', 'start', 'space-evenly']\n  },\n  sx: {\n    type: ControlType.Style\n  }\n})\n\nconst linkControls = {\n  children: {\n    title: 'Text',\n    type: ControlType.String,\n    required: true\n  },\n  to: {\n    title: 'URL',\n    type: ControlType.String,\n    defaultValue: '#!',\n    required: true\n  },\n  sx: {\n    type: ControlType.Style\n  }\n}\n\napplyPropertyControls(HeaderLogo.Logo, linkControls)\napplyPropertyControls(HeaderLogo.Link, linkControls)\n\nHeaderLogo.usage = `\n  <HeaderLogo>\n    <HeaderLogo.Logo to=\"/\" />\n    <HeaderLogo.Nav>\n      <HeaderLogo.Link to=\"/about\">About</HeaderLogo.Link>\n      <HeaderLogo.Link to=\"/blog\">Blog</HeaderLogo.Link>\n      <HeaderLogo.Link to=\"/contact\">Contact</HeaderLogo.Link>\n    </HeaderLogo.Nav>\n  </HeaderLogo>\n`\n\nexport default HeaderLogo\n","transformed":"const BLOCKS_Container = () => jsx(HeaderLogo, null, jsx(HeaderLogo.Logo, {\n  to: \"/\"\n}), jsx(HeaderLogo.Nav, null, jsx(HeaderLogo.Link, {\n  to: \"/about\"\n}, \"About\"), jsx(HeaderLogo.Link, {\n  to: \"/blog\"\n}, \"Blog\"), jsx(HeaderLogo.Link, {\n  to: \"/contact\"\n}, \"Contact\")));\n\nconst BLOCKS_Root = ({\n  children\n}) => {\n  return jsx(BLOCKS_Droppable, {\n    droppableId: \"root\"\n  }, (provided, snapshot) => jsx(\"div\", _extends({}, provided.droppableProps, {\n    style: {\n      minHeight: 'calc(100vh - 41px)'\n    },\n    ref: provided.innerRef\n  }), children, provided.placeholder));\n};"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"9f96bc08-53d3-581e-9381-5121222beebd","slug":"blocks/headers/logo"}}}