github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewTableStarResourceButton.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { Tags } from "./analytics"
     4  import { ReactComponent as StarSvg } from "./assets/svg/star.svg"
     5  import { InstrumentedButton } from "./instrumentedComponents"
     6  import { StarredResourcesContext } from "./StarredResourcesContext"
     7  import { AnimDuration, Color, mixinResetButtonStyle } from "./style-helpers"
     8  
     9  export const StyledTableStarResourceButton = styled(InstrumentedButton)`
    10    ${mixinResetButtonStyle};
    11    line-height: 16px;
    12  
    13    & > .MuiButton-label {
    14      display: inline-block;
    15    }
    16  `
    17  
    18  let StyledStarSvg = styled(StarSvg)`
    19    width: 13px;
    20    height: 13px;
    21    transition: transform ${AnimDuration.short} ease,
    22      opacity ${AnimDuration.short} ease;
    23  
    24    &:active {
    25      transform: scale(1.2);
    26    }
    27    &.is-starred {
    28      fill: ${Color.blue};
    29    }
    30    &.is-unstarred {
    31      opacity: 0;
    32      fill: ${Color.gray50};
    33    }
    34    &.is-unstarred:hover,
    35    ${StyledTableStarResourceButton}:focus &.is-unstarred {
    36      opacity: 1;
    37    }
    38  `
    39  
    40  type StarResourceButtonProps = {
    41    resourceName: string
    42    analyticsName: string
    43    ctx: StarredResourcesContext
    44    analyticsTags: Tags
    45  }
    46  
    47  export default function OverviewTableStarResourceButton(
    48    props: StarResourceButtonProps
    49  ): JSX.Element {
    50    let { ctx, resourceName, analyticsTags } = props
    51    let isStarred =
    52      ctx.starredResources && ctx.starredResources.includes(resourceName)
    53  
    54    let icon: JSX.Element
    55    let classes = ""
    56    let title: string
    57  
    58    if (isStarred) {
    59      title = "Remove Star"
    60      classes = "is-starred"
    61    } else {
    62      title = "Star this Resource"
    63      classes = "is-unstarred"
    64    }
    65  
    66    return (
    67      <StyledTableStarResourceButton
    68        title={title}
    69        onClick={() => ctx.toggleStarResource(resourceName)}
    70        analyticsName={props.analyticsName}
    71        analyticsTags={{
    72          newStarState: (!isStarred).toString(),
    73          ...analyticsTags,
    74        }}
    75      >
    76        <StyledStarSvg className={classes} />
    77      </StyledTableStarResourceButton>
    78    )
    79  }