How to use the styled-components/macro function in styled-components

* See: https://www.styled-components.com/docs/faqs#why-am-i-getting-html-attribute-warnings
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const PandaHead = ({ duration, isSelected, ...props }: PandaHeadProps) => (
  
);

interface DisplayProps extends PandaHeadProps {
  duration: number,
}

interface InputProps extends PandaHeadProps {
  isSelected: boolean,
}

const DisplayPandaHead = styled(PandaHead)`
  ${({ duration }: DisplayProps) => duration !== 0
    && css`
      animation: ${duration / 1000}s ${jump} ease-in-out infinite;
    `};
`;

// touch-action set to none to inform chrome that no scrolling is performed on this element,
// preventing it from setting the event as passive by default, which would in turn stop us
// from calling preventDefault() to curb propagation of touch events to mouse events
const InputPandaPotContainer = styled.div`
  opacity: ${({ isSelected }: InputProps) => (isSelected ? '0.5' : '1')};
  touch-action: none;
  transition: 0.1s;
  cursor: pointer;
`;

import styled from 'styled-components/macro';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import isEqual from 'react-fast-compare';

// Determines if the current value is in an alarm threshold so we can show it in red rather
// than the more faded default style.
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);

interface IconProps {
    icon: IconProp;
    usage: number;
    limit: string;
    isAlarm: boolean;
}

const Icon = memo(styled(FontAwesomeIcon)<{ $alarm: boolean }>`
    ${props => props.$alarm ? tw`text-red-400` : tw`text-neutral-500`};
`, isEqual);

const IconDescription = styled.p<{ $alarm: boolean }>`
    ${tw`text-sm ml-2`};
    ${props => props.$alarm ? tw`text-white` : tw`text-neutral-400`};
`;

export default ({ server, className }: { server: Server; className?: string }) => {
    const interval = useRef(null);
    const [ stats, setStats ] = useState(null);
    const [ statsError, setStatsError ] = useState(false);

    const getStats = () => {
        setStatsError(false);
        return getServerResourceUsage(server.uuid)

import React from 'react'
import styled from 'styled-components/macro'
import PageContainer from 'components/PageContainer'
import { Link, Flex, Box, Image, Bold, Text, H4, AbsoluteLink } from 'ui/common'
import { isMobile } from 'ui/media'
import Subscribe from 'components/Subscribe'

import LogoSrc from 'images/logo.png'

import Reddit from 'images/reddit.svg'
import Telegram from 'images/telegram.svg'
import Medium from 'images/medium.svg'
import Twitter from 'images/twitter.svg'

const Container = styled(Box)`
  background: #344498;
  color: #ffffff;

  a {
    color: #ffffff;

    &:hover {
      color: #bfcdff;
    }
  }
`

const SmallIcon = ({ ml, href, src }) => (

import { State } from "../../redux/reducers";
import ListingDiscourse from "../listing/ListingDiscourse";
import { getIsMemberOfAppellate } from "../../selectors";
import ScrollToTopOnMount from "../utility/ScrollToTop";

import { amountParams, durationParams, percentParams } from "./constants";
import { Parameter } from "./Parameter";
import CreateProposal from "./CreateProposal";
import CreateGovtProposal from "./CreateGovtProposal";
import ChallengeProposal from "./ChallengeProposal";
import ChallengeContainer from "./ChallengeProposalDetail";
import ProcessProposal from "./ProcessProposal";
import { connectParameters, ParametersProps } from "../utility/HigherOrderComponents";
import { compose } from "redux";

const GridRow = styled(StyledContentRow)`
  padding-top: 71px;

  ${mediaQueries.MOBILE} {
    padding-top: 42px;
  }
`;

const GridRowStatic = styled.div`
  margin: 0 auto;
  width: 1200px;

  ${mediaQueries.MOBILE} {
    width: auto;
  }
`;

import React from 'react'
import styled from 'styled-components/macro'
import { colors } from 'ui'
import BN from 'utils/bignumber'
import { Flex, Text, Box, Button, Link, H3 } from 'ui/common'
import { FormattedMessage } from 'react-intl'

const WrapText = styled(H3)`
  color: #4a4a4a;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  white-space: nowrap;
`

const Description = styled(Text)`
  font-size: 16px;
  color: #747474;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: normal;

opacity: 0;

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
  }

  ${props => props.entered && css`
    animation: ${AnimFadeSlide} 1.4s ${props.theme.curveFastoutSlowin} ${initDelay + 100}ms forwards;
  `}

  @media (max-width: ${props => props.theme.mobile}px) {
    font-size: 18px;
  }
`;

const ProjectLinkButton = styled(LinkButton)`
  opacity: 0;

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
  }

  ${props => props.entered && css`
    animation: ${AnimFadeSlide} 1.4s ${props.theme.curveFastoutSlowin} ${initDelay + 200}ms forwards;
  `}
`;

const ProjectMeta = styled.ul`
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;

transform: translate3d(0, ${props => props.status === 'entered' ? 0 : '-100%'}, 0);
  transition-property: transform, background;
  transition-duration: 0.5s;
  transition-timing-function: ${props => props.theme.curveFastoutSlowin};
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);

  @media (max-width: ${props => props.theme.mobile}px), (max-height: ${props => props.theme.mobile}px) {
    display: flex;
  }
`;

const HeaderMobileNavLink = styled(NavLink).attrs({
  active: 'active',
})`
  width: 100%;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
  color: ${props => props.theme.colorText};
  padding: 20px;
  transform: translate3d(0, -30px, 0);
  opacity: 0;
  transition: all 0.3s ${props => props.theme.curveFastoutSlowin};
  transition-delay: ${props => props.delay}ms;
  position: relative;
  top: -15px;

  @media ${props => props.theme.mobileLS} {