import React from "react"
import tw, {styled} from "twin.macro"
 
import { textColors, textColorsHover } from "./Colors"


function Text() {
  return (
    <div>

    </div>
  )
}

const Divider = styled.hr(tw`my-2 md:min-w-full border-secondary`)
export {Divider}

const DividerGreen = styled.hr(tw`h-2 border-0 from-accent bg-gradient-to-r rounded-2xl`)
export {DividerGreen}



const ClickableText = styled.button(({ type }) => [
  // The common button styles added with the tw import
  tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
    
  // Use props to conditionally style your components
  textColors[type], textColorsHover[type]
])
export {ClickableText}

export default Text