{"version":3,"sources":["webpack:///./src/pages/procedures/skin-cancer-surgery.tsx","webpack:///./src/components/Hero.tsx"],"names":["content","backgroundTitle","subtitle","title","otherOptions","text","to","data","header","bgImage","womanWaterfall","childImageSharp","height","inverted","image","otherBreast","darkness","style","fontSize","margin","map","mr","mb","float","small","color","outline","marginTop","Container","styled","div","Content","props","BgImage","Img","old","css","FormContainer","Hero","children","noForm","console","log","fluid","showMessage"],"mappings":"4FAAA,+IAmBMA,EAAU,CACdC,gBAAiB,6BACjBC,SAAU,oFACVC,MAAO,sBACPC,aAAc,CAKZ,CACEC,KAAM,8BACNC,GAAI,0BAEN,CACED,KAAM,sBACNC,GAAI,mCAEN,CACED,KAAM,gBACNC,GAAI,6BAEN,CACED,KAAM,eACNC,GAAI,8BAKK,0BAAGC,EAAI,EAAJA,KAAI,OACpB,gBAAC,IAAU,CAACC,OAAO,QACjB,gBAAC,SAAM,KACL,6BAAQR,EAAQG,MAAK,8BAGvB,gBAAC,IAAI,CAACM,QAASF,EAAKG,eAAeC,gBAAiBC,OAAO,UAG3D,gBAAC,IAAO,KACN,iDACA,0TAOA,2QAI+B,KAE/B,sTAMA,iHAIA,6UAOA,qJAKA,iGAIA,kNAKA,sNAMA,gBAAC,IAAI,CAACN,GAAG,aACP,gBAAC,IAAM,CAACO,UAAU,GAAK,uBAI3B,gBAAC,IAAiB,CAChBC,MAAOP,EAAKQ,YAAYJ,gBACxBR,MAAOH,EAAQC,gBACfW,OAAO,QACPI,SAAS,OAET,qBAAGC,MAAO,CAAEC,SAAU,GAAIC,OAAQ,iBAAiB,kFAIlDnB,EAAQI,aAAagB,KAAI,gBAAGd,EAAE,EAAFA,GAAID,EAAI,EAAJA,KAAI,OACnC,gBAAC,OAAI,CAACgB,GAAI,EAAGC,GAAI,EAAGL,MAAO,CAAEM,MAAO,SAClC,gBAAC,IAAI,CAACjB,GAAIA,GACR,gBAAC,IAAM,CAACkB,OAAO,EAAMC,MAAM,OAAOC,SAAS,GACxCrB,SAOX,gBAAC,IAAU,CAACY,MAAO,CAAEU,UAAW,KAC9B,+CAAuB3B,EAAQG,OAC/B,gBAAC,IAAa,KACZ,gBAAC,IAAS,sBACV,gBAAC,IAAS,gBACV,gBAAC,IAAS,0BAGZ,gBAAC,IAAQ,KACP,iNAKA,uNAMF,gBAAC,IAAQ,KACP,6UAOA,yMAMA,kGAIF,gBAAC,IAAQ,KACP,oEACA,0BACE,6CACA,iDACA,oCACA,qHACA,+DACA,0DACA,0CACA,2DACA,wGACA,iFAKN,gBAAC,eAAY,CAACI,KAAMA,O,kCC7LxB,sEAMMqB,EAAYC,UAAOC,IAAG,sEAAVD,CAAU,wDAUtBE,EAAUF,kBAA2B,WAAU,oEAArCA,CAAqC,qfAIzC,SAAAG,GAAK,OAAIA,EAAMpB,QAAU,UA2C/BqB,EAAUJ,kBAA2BK,KAAI,oEAA/BL,CAA+B,2EAMnC,SAAAG,GAAK,OAAIA,EAAMpB,QAAU,UAEjC,SAAAoB,GAAK,OAAIA,EAAMG,IAAMC,cAAG,kFAEX,SAAAJ,GAAK,OAAIA,EAAMpB,QAAU,UAMpCwB,cAAG,uFAYHC,EAAgBR,UAAOC,IAAG,0EAAVD,CAAU,ocAa1B,SAAAG,GAAK,OAAIA,EAAMG,KAAOC,cAAG,6EA2BzB,SAAAJ,GAAK,OAAIA,EAAMG,IAAMC,cAAG,sBAAsBA,cAAG,yBA6BxCE,IAbF,SAAH,OAAM1B,EAAM,EAANA,OAAQH,EAAO,EAAPA,QAAS8B,EAAQ,EAARA,SAAUC,EAAM,EAANA,OAAQL,EAAG,EAAHA,IAAG,OACpD,kBAACP,EAAS,KACPa,QAAQC,IAAI,SAAUP,GACvB,kBAACJ,EAAO,CAACnB,OAAQA,GAAS2B,GACzB9B,GAAW,kBAACwB,EAAO,CAACE,IAAKA,WAAcvB,OAAQA,EAAQ+B,MAAOlC,EAAQkC,SACrEH,GACA,kBAACH,EAAa,CAACF,IAAKA,YAClB,kBAAC,IAAI,CAAChC,MAAM,oBAAoByC,aAAa","file":"component---src-pages-procedures-skin-cancer-surgery-tsx-8ee68cf322e7ebf07c29.js","sourcesContent":["import * as React from 'react'\nimport { Flex } from 'grid-styled'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\nimport { Helmet } from 'react-helmet'\nimport Hero from '../../components/Hero'\nimport Button from '../../components/Button'\nimport BackgroundSection from '../../components/BackgroundSection'\nimport MainLayout from '../../components/Layout'\nimport { AboutContact } from '..'\nimport {\n  BeforeAfter,\n  StyledTabs,\n  StyledTabList,\n  StyledTab,\n  Content,\n} from '../../components/procedures'\nimport { TabPanel } from 'react-tabs'\n\nconst content = {\n  backgroundTitle: 'Other Body Surgery Options',\n  subtitle: `Trusted, Experienced & Ethical. Boutique plastic surgery on Sydney's North Shore.`,\n  title: 'Skin Cancer Surgery',\n  otherOptions: [\n    // {\n    //   text: 'Liposuction',\n    //   to: '/procedures/liposuction',\n    // },\n    {\n      text: 'Abdominoplasty (Tummy Tuck)',\n      to: '/procedures/tummy-tuck',\n    },\n    {\n      text: 'Skin Cancer Surgery',\n      to: '/procedures/skin-cancer-surgery',\n    },\n    {\n      text: 'Scar Revision',\n      to: '/procedures/scar-revision',\n    },\n    {\n      text: 'Mole Removal',\n      to: '/procedures/mole-removal',\n    },\n  ],\n}\n\nexport default ({ data }) => (\n  <MainLayout header=\"dark\">\n    <Helmet>\n      <title>{content.title} - Plastic Surgery Sydney</title>\n    </Helmet>\n\n    <Hero bgImage={data.womanWaterfall.childImageSharp} height=\"600px\">\n    </Hero>\n\n    <Content>\n      <h2>Skin Cancer Surgery</h2>\n      <h4>\n        Dr Sellars performs a range of surgical excision procedures including\n        skin cancer surgery. Skin cancer removal may include a biopsy to\n        determine the diagnosis, as well as excision of simple lesions and also\n        more complex excision surgery which may include flap repair or skin\n        grafting.\n      </h4>\n      <p>\n        Dermatologists and GP’s will refer patients to Dr Sellars they feel may\n        need a surgical excision. These doctors will often perform a biopsy\n        themselves and then refer to Dr Sellars for the excision once a biopsy\n        diagnosis had been obtained.{' '}\n      </p>\n      <p>\n        As a Specialist Plastic Surgeon, Dr Sellars has been trained in surgical\n        techniques that minimize scarring and give optimal aesthetic results. Dr\n        Sellars takes great care to provide an excellent cosmetic result,\n        whether it be a large cosmetic procedure or a simple lesion excision.\n      </p>\n      <h4>\n        Excisions include: BCC, SCC, Melanoma, Congenital Hairy Naevus, Benign\n        Mole removal\n      </h4>\n      <p>\n        Many procedures can be performed in the consulting rooms under local\n        anaesthetic. However more complex procedures that require skin flaps or\n        skin grafts will be done under sedation or general anaesthetic in\n        hospital. Most children under the age of 12 will not be done with local\n        anaesthetic in the rooms.\n      </p>\n      <h4>\n        Please note Dr Sellars does not perform routine skin checks. These are\n        done by the patient’s local GP or dermatologist.\n      </h4>\n\n      <p>\n        Dr Sellars can perform biopsies at time of consultation if required.\n      </p>\n\n      <h4>\n        For skin cancers and mole removal - The initial appointment will be a\n        consultation only, and no extra time for any procedure can be allocated\n        at this time, (eg excision of lesion).\n      </h4>\n      <p>\n        Once Dr Sellars has assessed the area of concern, another appointment\n        for excision can be made. This will depend on the site and size of\n        lesion and age and medical condition of patient.\n      </p>\n\n      <Link to=\"/contact/\">\n        <Button inverted={true}>Contact us today!</Button>\n      </Link>\n    </Content>\n\n    <BackgroundSection\n      image={data.otherBreast.childImageSharp}\n      title={content.backgroundTitle}\n      height=\"500px\"\n      darkness=\"0.4\"\n    >\n      <p style={{ fontSize: 18, margin: '-1rem 0 2rem' }}>\n        Browse Dr. Graham Sellars' full range of surgical and non-surgical\n        procedures.\n      </p>\n      {content.otherOptions.map(({ to, text }) => (\n        <Flex mr={2} mb={3} style={{ float: 'left' }}>\n          <Link to={to}>\n            <Button small={true} color=\"#fff\" outline={true}>\n              {text}\n            </Button>\n          </Link>\n        </Flex>\n      ))}\n    </BackgroundSection>\n\n    <StyledTabs style={{ marginTop: 50 }}>\n      <h2>Information about {content.title}</h2>\n      <StyledTabList>\n        <StyledTab>Pre operative</StyledTab>\n        <StyledTab>Surgery</StyledTab>\n        <StyledTab>Risks of Surgery</StyledTab>\n      </StyledTabList>\n\n      <TabPanel>\n        <p>\n          For skin cancers and mole removal - The initial appointment will be a\n          consultation only, and no extra time for any procedure can be\n          allocated at this time, (eg excision of lesion).\n        </p>\n        <p>\n          Once Dr Sellars has assessed the area of concern, another appointment\n          for excision can be made. This will depend on the site and size of\n          lesion and age and medical condition of patient.\n        </p>\n      </TabPanel>\n      <TabPanel>\n        <p>\n          Many procedures can be performed in the consulting rooms under local\n          anaesthetic. However more complex procedures that require skin flaps\n          or skin grafts will be done under sedation or general anaesthetic in\n          hospital. Most children under the age of 12 will not be done with\n          local anaesthetic in the rooms.\n        </p>\n        <p>\n          Other factors to consider are - can it be done in the rooms under\n          local anaesthetic or is a sedation or general anaesthetic required,\n          which would mean a hospital admission.\n        </p>\n\n        <p>\n          Dr Sellars can perform biopsies at time of consultation if required.\n        </p>\n      </TabPanel>\n      <TabPanel>\n        <h4>Possible risks of any surgery include:</h4>\n        <ul>\n          <li>Wound infection</li>\n          <li>Pain and discomfort</li>\n          <li>Nausea</li>\n          <li>Haematoma (an accumulation of blood around the surgical site that may require drainage)</li>\n          <li>Heavy bleeding from the incisions</li>\n          <li>Keloid or hypertrophic scars</li>\n          <li>Slow healing</li>\n          <li>Separation of the wound edges</li>\n          <li>Allergies to anaesthetic agents, antiseptics, suture material or dressings</li>\n          <li>Deep vein thrombosis DVT (blood clot in the leg)</li>\n        </ul>\n      </TabPanel>\n    </StyledTabs>\n\n    <AboutContact data={data} />\n  </MainLayout>\n)\nexport const query = graphql`\n  query SkinCancerQuery {\n    womanWaterfall: file(relativePath: { eq: \"sellars-skin.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 3000, quality: 90) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    otherBreast: file(relativePath: { eq: \"water-body-woman.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asaps: file(relativePath: { eq: \"ASAPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asps: file(relativePath: { eq: \"ASPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    drSellars: file(relativePath: { eq: \"dr-graham-sellars.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    fracs: file(relativePath: { eq: \"FRACS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`\n","import React from 'react'\nimport Img, { GatsbyImageProps } from 'gatsby-image'\nimport styled, { css } from 'styled-components'\nimport Form from './Form'\nimport { Container as FormWrapper } from './Contact'\n\nconst Container = styled.div`\n  max-width: 100vw;\n  overflow: hidden;\n  position: relative;\n`\n\ninterface IBgImageProps {\n  height: string\n}\n\nconst Content = styled<IBgImageProps, any>('section')`\n  position: absolute;\n  margin: 0 10%;\n  z-index: 99;\n  height: ${props => props.height || 'auto'};\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  text-align: left;\n\n  @media (max-width: 900px) {\n    text-align: center;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    margin-top: 80px;\n\n    p,\n    button {\n      display: none;\n    }\n  }\n\n  @media (max-width: 500px) {\n    align-items: center;\n    p,\n    button {\n      display: block;\n    }\n  }\n\n  h1,\n  h2,\n  h3 {\n    font-size: 30px;\n    margin: 1rem 0;\n    color: #fff;\n    text-shadow: 0 1px 55px rgba(0, 0, 0, 0.7);\n  }\n  p {\n    color: #fff;\n    font-size: 18px;\n    max-width: 420px;\n    width: auto;\n    text-shadow: 0 1px 35px rgba(0, 0, 0, 0.7);\n  }\n`\nconst BgImage = styled<IBgImageProps, any>(Img)`\n  position: absolute;\n  top: 0;\n  left: -5%;\n  width: 110%;\n  z-index: -1;\n  height: ${props => props.height || 'auto'};\n\n  ${props => props.old ? css`\n      @media (max-width: 900px) {\n        height:${props => props.height || 'auto'};\n      }\n\n      @media (max-width: 500px) {\n        height: 450px;\n      }\n  ` : css`\n  @media (max-width: 900px) {\n    height: 520px;\n  }\n\n  @media (max-width: 500px) {\n    height: 250px;\n  }\n  `}\n\n`\n\nconst FormContainer = styled.div`\n  width: 420px;\n  background: #fff;\n  border-radius: 4px;\n  padding: 1.5rem 2rem;\n  position: absolute;\n  right: 10%;\n  top: calc(50% + 30px);\n  transform: translateY(-50%);\n\n  @media (max-width: 900px) {\n    width: 90%;\n    max-width: 340px;\n    ${props => props.old && css`\n        left: 50%;\n      right: auto;\n      bottom: 20px;\n      top: auto;\n      transform: translateX(-50%);\n    `}\n  }\n\n  @media (max-width: 500px) {\n    display: none;\n  }\n\n  input {\n    padding: 0.75rem 1rem;\n  }\n\n  h2 {\n    color: #333 !important;\n    font-size: 1.75rem;\n    margin-bottom: 0.5rem;\n    font-weight: 400;\n    text-align: center;\n    text-shadow: none;\n  }\n\n  @media (max-width: 900px) {\n    ${props => props.old ? css`margin-top: 2rem;` : css`margin-top: 1rem;`}\n  }\n\n  @media (max-width: 480px) {\n    width: 105%;\n  }\n`\n\ninterface IHeroProps {\n  height: string\n  bgImage: GatsbyImageProps\n  children: React.ReactChild\n  noForm: boolean\n  old?: boolean\n}\n\nconst Hero = ({ height, bgImage, children, noForm, old }: IHeroProps) => (\n  <Container >\n    {console.log('oldold', old)}\n    <Content height={height}>{children}</Content>\n    {bgImage && <BgImage old={old ?? false} height={height} fluid={bgImage.fluid} />}\n    {!noForm && (\n      <FormContainer old={old ?? false}>\n        <Form title=\"Contact us today!\" showMessage={false} />\n      </FormContainer>\n    )}\n  </Container>\n)\n\nexport default Hero\n"],"sourceRoot":""}