import React, { useState } from "react"
import styled from "styled-components"
import { Banner, Box } from "@artsy/palette"
import { data as sd } from "sharify"

export const StagingBanner = () => {
  const [show, toggleVisible] = useState(true)

  if (!show) {
    return null
  }

  return (
    <Container onClick={() => toggleVisible(false)}>
      <Banner
        backgroundColor="purple100"
        message={sd.APP_URL.replace("https://", "").replace("http://", "")}
      />
    </Container>
  )
}

const Container = styled(Box)`
  position: relative;
  z-index: 2;
`

import React from "react"
import styled from "styled-components"
import { Banner, Box } from "@artsy/palette"
import { data as sd } from "sharify"

export const StagingBanner = () => {
  return (
    <Container>
      <Banner
        backgroundColor="purple100"
        message={sd.APP_URL.replace("https://", "").replace("http://", "")}
      />
    </Container>
  )
}

const Container = styled(Box)`
  position: relative;
  z-index: 2;
`

--- 
+++ 
@@ -1,11 +1,17 @@
-import React from "react"
+import React, { useState } from "react"
 import styled from "styled-components"
 import { Banner, Box } from "@artsy/palette"
 import { data as sd } from "sharify"
 
 export const StagingBanner = () => {
+  const [show, toggleVisible] = useState(true)
+
+  if (!show) {
+    return null
+  }
+
   return (
-    <Container>
+    <Container onClick={() => toggleVisible(false)}>
       <Banner
         backgroundColor="purple100"
         message={sd.APP_URL.replace("https://", "").replace("http://", "")}
Add toggle to hide staging banner
