ChromeKit Component

import * as React from "react"
import { useState } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import styled, { css } from "styled-components"
import MaterialIcon from "material-icons-react"

addPropertyControls(ChromeKit, {
    link: { type: ControlType.String, title: "Link" },
    tabs: { type: ControlType.Number, title: "Number of open tabs" },
    themecolor: { type: ControlType.Color, title: "Theme Color" },
    appearance: {
        type: ControlType.Enum,
        options: ["dark", "light"],
        optionTitles: ["Dark", "Light"],
        title: "Appearance",
        defaultValue: "dark",
    },
})

ChromeKit.defaultProps = {
    link: "https://framer.com",
    tabs: 26,
    themecolor: "#FFFFFF",
    width: 411,
    height: 80,
    appearance: "dark",
}

const getTime = () => {
    const today = new Date()
    return today.toLocaleTimeString().slice(0, -3)
}

export function ChromeKit(props) {
    const { width, height, themecolor, link, tabs, appearance } = props
    console.log("appearance =>", appearance)
    const [time, setTime] = useState(getTime)
    console.log(
        `appearance === "light" ? "#646464" : "#fff" =>`,
        appearance === "light" ? "#646464" : "#fff"
    )

    setInterval(() => {
        setTime(getTime)
    }, 1000)

    return (
        <Container width={width} height={height + 30} background={themecolor}>
            <StatusBar>
                <MaterialIcon
                    size="tiny"
                    icon="network_wifi"
                    color={() => (appearance === "light" ? "#646464" : "#fff")}
                />
                <MaterialIcon
                    size="tiny"
                    icon="signal_cellular_4_bar"
                    color={() => (appearance === "light" ? "#646464" : "#fff")}
                />
                <MaterialIcon
                    size="tiny"
                    icon="battery_full"
                    color={() => (appearance === "light" ? "#646464" : "#fff")}
                />
                <p>{time}</p>
            </StatusBar>
            <ChromeUI>
                <AddressBar>
                    <MaterialIcon icon="lock" color="#177B3A" size="tiny" />
                    <p>{link}</p>
                </AddressBar>
                <OpenTabs>
                    <p>{tabs}</p>
                </OpenTabs>
                <MaterialIcon
                    icon="more_vert"
                    color={() => (appearance === "light" ? "#3c4040" : "#fff")}
                />
            </ChromeUI>
        </Container>
    )
}

const Container = styled(Frame)`
  p {
    margin: 0;
    color: ${props => (props.appearance === "light" ? "#656466" : "#fff")};
    font-size: 16px;
  }
`

const StatusBar = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;

  width: 100%;
  height: 20px;
  padding: 0px 8px;
`

const ChromeUI = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0px 8px;
`

const AddressBar = styled.div`
  display: flex;
  background-color: rgba(230, 230, 230, 0.3);
  width: 100%;
  border-radius: 99px;
  flex-grow: 1;
  align-items: center;
  padding: 10px 10px;

  p {
    color: white;
     ${props =>
         props.appearance == "light" &&
         css`
    color: black;
  `}

    padding-left: 6px;
  }
`

const OpenTabs = styled.div`
  border: 2px solid #3c4040;
  border-radius: 4px;
  margin: 0px 16px;

  p  {
    color: #3c4040;
    margin: 1px;
    font-weight: 800;
    font-size: 10px;
  }
`