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

     1  import React, { MouseEventHandler } from "react"
     2  import styled from "styled-components"
     3  import { Tags } from "./analytics"
     4  import { InstrumentedButton } from "./instrumentedComponents"
     5  import {
     6    AnimDuration,
     7    Color,
     8    Font,
     9    FontSize,
    10    mixinResetButtonStyle,
    11  } from "./style-helpers"
    12  
    13  const ShowMoreButtonRoot = styled(InstrumentedButton)`
    14    ${mixinResetButtonStyle};
    15    color: ${Color.gray60};
    16    font-family: ${Font.sansSerif};
    17    font-size: ${FontSize.small};
    18    padding: 0 0.5em;
    19    transition: color ${AnimDuration.default} ease;
    20  
    21    &:hover,
    22    &:focus,
    23    &:active {
    24      color: ${Color.blue};
    25    }
    26  `
    27  
    28  const ShowMoreCount = styled.span`
    29    color: ${Color.gray70};
    30    font-family: ${Font.sansSerif};
    31    font-size: ${FontSize.small};
    32  `
    33  
    34  export function ShowMoreButton({
    35    itemCount,
    36    currentListSize,
    37    onClick,
    38    analyticsTags,
    39  }: {
    40    itemCount: number
    41    currentListSize: number
    42    analyticsTags: Tags
    43    onClick: MouseEventHandler
    44  }) {
    45    if (itemCount <= currentListSize) {
    46      return null
    47    }
    48  
    49    const remainingCount = itemCount - currentListSize
    50  
    51    return (
    52      <>
    53        <ShowMoreButtonRoot
    54          analyticsName="ui.web.showMore"
    55          analyticsTags={analyticsTags}
    56          onClick={onClick}
    57        >
    58          …Show more
    59        </ShowMoreButtonRoot>
    60        <ShowMoreCount aria-label={`${remainingCount} hidden resources`}>
    61          ({remainingCount})
    62        </ShowMoreCount>
    63      </>
    64    )
    65  }