styled-components#useTheme TypeScript Examples

InputBox = ({ boxColor, boxState, children }: InputBoxProps) => {
  const theme = useTheme()
  const isActive = boxState === 'active'

  return (
    <BoxContainer testID="box-container" borderWidth={isActive ? 0 : 1} theme={theme}>
      <Box testID="box" borderColor={boxColor || getColorLowEmphasis(theme)} borderWidth={isActive ? 2 : 1} theme={theme}>
        { children }
      </Box>
    </BoxContainer>
  )
}

Result: React.FC<ResultProps> = ({
  title,
  state,
  icon,
  subtitle,
  extra,
}) => {
  const theme = useTheme();
  return (
    <ResultWrapper>
      {icon ||
        createElement(IconMap[state], {
          size: 32,
          color:
            state === ResultState.ERROR
              ? theme?.colors?.red
              : theme?.colors?.primary,
        })}
      <Title>{title}</Title>
      <Subtitle>{subtitle}</Subtitle>
      {extra}
    </ResultWrapper>
  );
}

function PeptideMarkerInsertionUnmemoed({ seqName, insertion, pixelsPerAa, ...rest }: MissingViewProps) {
  const {
    seqView: {
      markers: {
        insertions: { background, outline },
      },
    },
  } = useTheme()

  const { t } = useTranslationSafe()
  const [showTooltip, setShowTooltip] = useState(false)
  const onMouseLeave = useCallback(() => setShowTooltip(false), [])
  const onMouseEnter = useCallback(() => setShowTooltip(true), [])

  const id = getSafeId('insertion-marker', { seqName, ...insertion })

  const { pos } = insertion
  const halfNuc = Math.max(pixelsPerAa, AA_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
  const x = pos * pixelsPerAa - halfNuc

  const insertions = useMemo(() => [insertion], [insertion])
  const pointsMain = useMemo(() => `${x} 10, ${x + 5} 19, ${x - 5} 19`, [x])
  const pointsOutline = useMemo(() => `${x} 7, ${x + 7} 22, ${x - 7} 22`, [x])

  return (
    <g id={id} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <polygon points={pointsOutline} fill={outline} {...rest} />
      <polygon points={pointsMain} fill={background} {...rest} />
      <Tooltip target={id} isOpen={showTooltip} fullWidth>
        <h6>{t('Amino acid insertion')}</h6>
        <ListOfInsertionsAa insertions={insertions} totalInsertions={1} />
      </Tooltip>
    </g>
  )
}

Loading = () => {
  const theme = useTheme();

  return (
    <LoadingWrapper>
      <svg
        width="48"
        height="48"
        viewBox="0 0 48 48"
        xmlns="http://www.w3.org/2000/svg"
        stroke={theme.primary}
      >
        <g fill="none" fillRule="evenodd">
          <g transform="translate(4 4)" strokeWidth="8">
            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
            <path d="M36 18c0-9.94-8.06-18-18-18">
              <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 18 18"
                to="360 18 18"
                dur="1s"
                repeatCount="indefinite"
              />
            </path>
          </g>
        </g>
      </svg>
    </LoadingWrapper>
  );
}

export function NucleotideMutationBadge({ mutation }: NucleotideMutationBadgeProps) {
  const theme = useTheme()
  const { refNuc, pos, queryNuc } = mutation

  const refBg = shade(0.25)(getNucleotideColor(refNuc))
  const refFg = getTextColor(theme, refBg)
  const queryBg = shade(0.25)(getNucleotideColor(queryNuc))
  const queryFg = getTextColor(theme, queryBg)
  const posOneBased = pos + 1

  return (
    <MutationBadgeBox>
      <MutationWrapper>
        {refNuc && (
          <ColoredText $background={refBg} $color={refFg}>
            {refNuc}
          </ColoredText>
        )}
        {pos && <PositionText>{posOneBased}</PositionText>}
        {queryNuc && (
          <ColoredText $background={queryBg} $color={queryFg}>
            {queryNuc}
          </ColoredText>
        )}
      </MutationWrapper>
    </MutationBadgeBox>
  )
}

InputLabel = ({ color, content, required }: LabelProps) => {
  const theme = useTheme()

  return (
    <Label testID="label" color={color} theme={theme}>
      { content }
      { required && '*' }
    </Label>
  )
}

export function ChartRuler({ x1, x2, y1, y2 }: ChartRulerProps) {
  const theme = useTheme();

  return (
    <>
      <line
        x1={x1}
        x2={x2}
        y1={y1}
        y2={y2}
        strokeWidth={1}
        stroke={rulerShadowColor({
          color: theme.textInput.backgroundColor,
          intensity: theme.intensity,
        })}
      />
      <line
        x1={x1}
        x2={x2}
        y1={y1 + 1}
        y2={y2 + 1}
        strokeWidth={1}
        stroke={rulerLightColor({
          color: theme.textInput.backgroundColor,
          intensity: theme.intensity,
        })}
      />
    </>
  );
}

Ages = ({ ages }: any) => {
  const theme = useTheme();
  return (
    <StyledAges>
      <div className="head">Cases by Age</div>
      <div className="chart-wrap">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={ages}
            layout="vertical"
            margin={{
              top: 10,
              right: 0,
              left: 0,
              bottom: 10,
            }}
            // @ts-ignore
            isAnimationActive={false}
          >
            <XAxis type="number" hide />
            <YAxis type="category" dataKey="group" interval={0} width={90} />

            <Bar dataKey="active" fill={theme.teal} stackId="a" />
            <Bar dataKey="recovered" fill={theme.green} stackId="a" />
            <Bar dataKey="deaths" fill={theme.navy} stackId="a" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <ChartLegend
        items={[
          { title: "Active", color: theme.teal },
          { title: "Recovered", color: theme.green },
          { title: "Deaths", color: theme.navy },
        ]}
      />
    </StyledAges>
  );
}

export default function About(): JSX.Element {
  const theme = useTheme();

  const [activeTab, setActiveTab] = useState<"Details" | "Licenses">("Details");

  return (
    <>
      <ModalHeader title="About TabMerger" />

      <StyledRow $gap="32px">
        <a href={TABMERGER_DEMO_SITE} title={TABMERGER_DEMO_SITE} target="_blank" rel="noreferrer">
          <Logo src="./images/logo48.png" alt="TabMerger Logo" />
        </a>

        <AboutTitle>
          <Link href={TABMERGER_DEMO_SITE} title={`TabMerger v${version}`} color={theme.colors.onBackground} />

          <p>Copyright &copy; {new Date().getFullYear()} lbragile</p>
          <p>All rights reserved</p>
        </AboutTitle>
      </StyledRow>

      <Selector opts={["Details", "Licenses"]} activeTab={activeTab} setActiveTab={setActiveTab} />

      {activeTab === "Details" ? <Details /> : <License />}

      <Note>
        <p>By using this software you agree to TabMerger&apos;s</p>

        <Link href={TABMERGER_TOS_LINK} title="Terms and Conditions" />
      </Note>

      <ModalFooter showSave={false} />
    </>
  );
}

RegionAgeGenderChart = ({ data }: { data: any }) => {
  const theme = useTheme();
  return (
    <StyledRegionAgeGenderChart>
      <h3>Age Groups by DHB</h3>
      <div className="chart-wrap">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={data}
            layout="vertical"
            margin={{
              top: 10,
              right: 0,
              left: 0,
              bottom: 10,
            }}
            // @ts-ignore
            isAnimationActive={false}
          >
            <XAxis type="number" hide />
            <YAxis type="category" dataKey="age" interval={0} width={90} />
            <Bar dataKey="male" fill={theme.teal} stackId="a" />
            <Bar dataKey="female" fill={theme.green} stackId="a" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <div className="legend">
        <div className="legend-item male">Male</div>
        <div className="legend-item female">Female</div>
      </div>
    </StyledRegionAgeGenderChart>
  );
}

TradingView = () => {
  const { currentLanguage } = useTranslation()
  const theme = useTheme()

  useEffect(() => {
    // @ts-ignore
    if (window.TradingView) {
      // @ts-ignore
      initializeTradingView(window.TradingView, theme, currentLanguage.code)
    } else {
      tradingViewListener().then((tv) => {
        initializeTradingView(tv, theme, currentLanguage.code)
      })
    }
  }, [theme, currentLanguage])

  return (
    <Box overflow="hidden" className="tradingview_container">
      <div id="tradingview_b239c" />
    </Box>
  )
}

TransmissionChart = ({ data = [] }) => {
  const theme = useTheme();
  const chartColors = [
    theme.teal,
    theme.green,
    theme.navy,
    theme.yellow,
    "#956828",
  ];

  return (
    <StyledTransmissionChart>
      <div className="head">Source of cases</div>
      <div className="row">
        <div className="chart-wrap">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie dataKey="percent" data={data} outerRadius="100%">
                {data.map((_, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={chartColors[index % chartColors.length]}
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div>
          {data.map((item: any, i: number) => (
            <LegendItem key={i} typeColor={chartColors[i]}>
              {item.type}: <span>{item.percent}</span>
            </LegendItem>
          ))}
        </div>
      </div>
    </StyledTransmissionChart>
  );
}

export function BooleanControl({ description }: Props) {
  const theme = useTheme();

  const [isChecked = false, setIsChecked] = useControlState<boolean>();

  const handleToggle = useCallback(() => {
    setIsChecked(!isChecked);
  }, [isChecked, setIsChecked]);

  return (
    <Container onClick={handleToggle}>
      <Checkbox
        isChecked={isChecked}
        className="elyricon elyricon-check"
        tabIndex={0}
        role="checkbox"
        aria-checked={isChecked ? "true" : "false"}
        aria-label=""
      >
        {theme.overrides?.checkIcon}
      </Checkbox>
      <div className="properties-control-description">{description}</div>
    </Container>
  );
}

describe('<ThemeProvider />', () => {
  let store: ReturnType<typeof configureAppStore>

  beforeEach(() => {
    store = configureAppStore()
  })

  it('should render its children', () => {
    const text = 'Test'
    const children = () => <h1>{text}</h1>
    const { queryByText } = renderThemeProvider(store, children)
    expect(queryByText(text)).toBeInTheDocument()
  })

  // @TODO theme selection is not implemented yet
  // A dark-mode would be nice
  it.skip('should render selected theme', () => {
    let theme: any
    const children = () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      theme = useTheme()
      return <h1>a</h1>
    }
    renderThemeProvider(store, children)
    expect(theme).toBe(selectTheme(store.getState() as any))
  })
})

function SequenceMarkerInsertionUnmemoed({ seqName, insertion, pixelsPerBase, ...rest }: MissingViewProps) {
  const {
    seqView: {
      markers: {
        insertions: { background, outline },
      },
    },
  } = useTheme()

  const { t } = useTranslationSafe()
  const [showTooltip, setShowTooltip] = useState(false)
  const onMouseLeave = useCallback(() => setShowTooltip(false), [])
  const onMouseEnter = useCallback(() => setShowTooltip(true), [])

  const id = getSafeId('insertion-marker', { seqName, ...insertion })

  const { pos } = insertion
  const halfNuc = Math.max(pixelsPerBase, BASE_MIN_WIDTH_PX) / 2 // Anchor on the center of the first nuc
  const x = pos * pixelsPerBase - halfNuc

  const insertions = useMemo(() => [insertion], [insertion])
  const pointsMain = useMemo(() => `${x} 10, ${x + 5} 19, ${x - 5} 19`, [x])
  const pointsOutline = useMemo(() => `${x} 7, ${x + 7} 22, ${x - 7} 22`, [x])

  return (
    <g id={id} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <polygon points={pointsOutline} fill={outline} {...rest} />
      <polygon points={pointsMain} fill={background} {...rest} />
      <Tooltip target={id} isOpen={showTooltip} fullWidth>
        <h6>{t('Nucleotide insertion')}</h6>
        <ListOfInsertionsNuc insertions={insertions} totalInsertions={1} />
      </Tooltip>
    </g>
  )
}

function TransactionHistoryProgressSpinnerBase({
  className,
  size,
}: TransactionHistoryProgressSpinnerProps) {
  const theme = useTheme();

  return (
    <div className={className} style={{ height: size === 'small' ? 50 : 200 }}>
      <CircleSpinner
        size={size === 'small' ? 20 : 40}
        color={theme.textColor}
      />
    </div>
  );
}

Icon: React.FC<SvgProps> = (props) => {
  const theme = useTheme();
  const primaryColor = theme.isDark ? "#3C3742" : "#e9eaeb";
  const secondaryColor = theme.isDark ? "#666171" : "#bdc2c4";

  return (
    <Svg viewBox="0 0 32 32" {...props}>
      <path d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16z" fill={primaryColor} />
      <mask id="A" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
        <path d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16z" fill="#c4c4c4" />
      </mask>
      <g mask="url(#A)">
        <path
          d="M25.128 16.436c0 3.115-4.133 5.641-9.231 5.641s-9.231-2.526-9.231-5.641V15h18.461v1.436zm2.205 13.806c0-3.815-5.074-6.908-11.333-6.908S4.667 26.426 4.667 30.242V32h22.667v-1.759z"
          fill={secondaryColor}
        />
        <path
          fillRule="evenodd"
          d="M10.234 5.601C9.942 4.264 10.96 3 12.328 3c1.184 0 2.143.959 2.143 2.143v3.873l1.427-.067c.589 0 1.166.034 1.724.098V5.143c0-1.184.959-2.143 2.143-2.143 1.368 0 2.386 1.264 2.093 2.601l-.931 4.258c2.529 1.006 4.201 2.749 4.201 4.731 0 3.115-4.133 5.641-9.231 5.641s-9.231-2.526-9.231-5.641c0-2.053 1.794-3.849 4.476-4.836l-.908-4.153z"
          fill={secondaryColor}
        />
        <ellipse cx="12.308" cy="14.846" rx="1.026" ry="1.538" fill={primaryColor} />
        <ellipse cx="19.385" cy="14.846" rx="1.026" ry="1.538" fill={primaryColor} />
      </g>
    </Svg>
  );
}

export function PollStatusSpan({ status, endsIn, children }: StatusSpanProps) {
  const theme = useTheme();

  return status === 'in_progress' && endsIn.getTime() < Date.now() ? (
    <s>{children}</s>
  ) : (
    <span
      style={
        status === 'rejected'
          ? { color: theme.colors.negative }
          : status === 'passed'
          ? { color: theme.colors.positive }
          : undefined
      }
    >
      {children}
    </span>
  );
}

Default: React.FC = () => {
  const theme = useTheme();
  const [onPresent1] = useModal(<CustomModal title="Modal 1" />);
  const [onPresent2] = useModal(<CustomModal title="Modal 2" />);
  const [onPresent3] = useModal(<CustomModal title="Modal 3" headerBackground={theme.colors.gradients.cardHeader} />);
  return (
    <div>
      <Button onClick={onPresent1}>Open modal 1</Button>
      <Button onClick={onPresent2}>Open modal 2</Button>
      <Button onClick={onPresent3}>Open modal with background</Button>
    </div>
  );
}

WithdrawableAssetBase = (props: WithdrawableAssetProps) => {
  const { tokenContract, balance, symbol } = props;
  const withdrawAssetsTx = useWithdrawAssetsTx();
  const [withdrawAsset, txResult] = withdrawAssetsTx?.stream ?? [null, null];
  const theme = useTheme();

  const withdraw = useCallback(() => {
    withdrawAsset!({ tokenContract, amount: balance, symbol });
  }, [tokenContract, withdrawAsset, balance, symbol]);

  if (txResult?.status === StreamStatus.DONE) {
    return null;
  }

  const loading = txResult?.status === StreamStatus.IN_PROGRESS;

  return (
    <div className={props.className}>
      <div className="symbol">
        {loading && (
          <span className="spinner">
            <CircleSpinner size={14} color={theme.colors.positive} />
          </span>
        )}
        {symbol}
        {loading === false && (
          <WithdrawButton className="button" onClick={withdraw} />
        )}
      </div>
      <span>{balance}</span>
    </div>
  );
}

describe('<ThemeProvider />', () => {
  let store: ReturnType<typeof configureAppStore>;

  beforeEach(() => {
    store = configureAppStore();
  });

  it('should render its children', () => {
    const text = 'Test';
    const children = () => <h1>{text}</h1>;
    const { queryByText } = renderThemeProvider(store, children);
    expect(queryByText(text)).toBeInTheDocument();
  });

  it('should render selected theme', () => {
    let theme: any;
    const children = () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      theme = useTheme();
      return <h1>a</h1>;
    };
    renderThemeProvider(store, children);
    expect(theme).toBe(selectTheme(store.getState() as any));
  });
});

Icon: React.FC<SvgProps> = (props) => {
  const theme = useTheme();
  const { isMobile } = useMatchBreakpoints();
  const fill = isMobile ? { fill: theme.colors.darkGrey } : { fill: theme.colors.white };
  return (
    <Svg viewBox="0 0 24 24" {...props} {...fill}>
      <path d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" />
    </Svg>
  );
}

describe('<ThemeProvider />', () => {
  let store: ReturnType<typeof configureAppStore>;

  beforeEach(() => {
    store = configureAppStore();
  });

  it('should render its children', () => {
    const text = 'Test';
    const children = () => <h1>{text}</h1>;
    const { queryByText } = renderThemeProvider(store, children);
    expect(queryByText(text)).toBeInTheDocument();
  });

  it('should render selected theme', () => {
    let theme: any;
    const children = () => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      theme = useTheme();
      return <h1>a</h1>;
    };
    renderThemeProvider(store, children);
    expect(theme).toBe(selectTheme(store.getState() as any));
  });
});

function useColorPalette(): ColorPalette {
  const theme = useTheme();
  return useMemo<ColorPalette>(() => {
    return {
      line: {
        stroke: theme.colors.primary,
        strokeWidth: 4,
      },
      pointing: {
        line: {
          stroke: '#9E9FB3',
          strokeWidth: 1,
          strokeDasharray: '3 3',
        },
        date: {
          fill: theme.textColor,
        },
      },
      slider: {
        backgroundColor: theme.label.backgroundColor,
        strokeColor: theme.textColor,
      },
    };
  }, [theme.colors.primary, theme.label.backgroundColor, theme.textColor]);
}

TradingView = () => {
  const { currentLanguage } = useTranslation()
  const theme = useTheme()
  const { lastUpdated, setLastUpdated } = useLastUpdated()

  useEffect(() => {
    const ele = document.getElementById(TRADING_VIEW_COMPONENT_ID)

    const debouncedOnResize = debounce(() => {
      setLastUpdated()
    }, 500)

    const resizeObserver = new ResizeObserver(() => {
      debouncedOnResize()
    })

    resizeObserver.observe(ele)

    return () => {
      resizeObserver.unobserve(ele)
    }
  }, [setLastUpdated])

  useEffect(() => {
    // @ts-ignore
    if (window.tv) {
      // @ts-ignore
      initializeTradingView(window.tv, theme, currentLanguage.code)
    } else {
      tradingViewListener().then((tv) => {
        initializeTradingView(tv, theme, currentLanguage.code)
      })
    }
  }, [theme, currentLanguage, lastUpdated])

  return (
    <Box overflow="hidden" className="tradingview_container">
      <div id={TRADING_VIEW_COMPONENT_ID} />
    </Box>
  )
}

function RightPanel({
  mode,
  width,
  isActive,
  children,
  onMouseDown,
}: RightPanelProps) {
  const theme = useTheme();

  const [isHover, setIsHover] = useState(false);
  const timerRef = useRef<number>();

  const handleMouseLeave = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
    setIsHover(false);
  }, []);

  const handleMouseEnter = useCallback(() => {
    if (isActive === true) {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
      setIsHover(true);
    } else {
      // window is needed so typescript uses DOM setTimeout and not NodeJS
      timerRef.current = window.setTimeout(() => {
        setIsHover(true);
      }, hoverDelay);
    }
  }, [isActive]);

  switch (mode) {
    case "open":
      return (
        <div>
          <Panel
            style={{
              borderLeft: `1px solid ${theme.palette.divider}`,
              width: `${width}px`,
              right: 0,
            }}
          >
            {children}
          </Panel>
          <Sash
            data-testid="drag-handle"
            style={{
              right: `${width - 1}px`,
            }}
            isActive={isHover || isActive}
            onMouseDown={onMouseDown}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          />
        </div>
      );
    case "collapsed":
      return (
        <Panel
          style={{
            background: theme.palette.background.secondary,
            width: "32px",
            right: 0,
          }}
        >
          {children}
        </Panel>
      );
    case "closed":
      return null;
  }
}

ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayCount = 3, t }) => {
  const [showMore, setShowMore] = useState(false);
  const theme = useTheme();
  const sortedConfig = getPreferredConfig(config);
  const displayListConfig = showMore || sortedConfig.length <= 4 ? sortedConfig : sortedConfig.slice(0, displayCount);
  return (
    <ModalContainer minWidth="320px">
      <ModalHeader>
        <ModalTitle>
          <Heading>{t("Connect Wallet")}</Heading>
        </ModalTitle>
        <ModalCloseButton onDismiss={onDismiss} />
      </ModalHeader>
      <ModalBody width={["320px", null, "340px"]}>
        <WalletWrapper py="24px" maxHeight="453px" overflowY="auto">
          <Grid gridTemplateColumns="1fr 1fr">
            {displayListConfig.map((wallet) => (
              <Box key={wallet.title}>
                <WalletCard walletConfig={wallet} login={login} onDismiss={onDismiss} />
              </Box>
            ))}
            {!showMore && sortedConfig.length > 4 && <MoreWalletCard t={t} onClick={() => setShowMore(true)} />}
          </Grid>
        </WalletWrapper>
        <Box p="24px">
          <Text textAlign="center" color="textSubtle" as="p" mb="16px">
            {t("Haven’t got a crypto wallet yet?")}
          </Text>
          <Button
            as="a"
            href="https://docs.vvs.finance/getting-started/connecting-a-wallet"
            width="100%"
            {...getExternalLinkProps()}
          >
            {t("Learn How to Connect")}
          </Button>
        </Box>
      </ModalBody>
    </ModalContainer>
  );
}

RoundMultiplierUpArrow: React.FC<MultiplierProps> = ({ isActive, ...props }) => {
  const theme = useTheme()
  const fill = theme.colors[isActive ? 'success' : 'tertiary']

  return (
    <Svg height="65px" width="240px" viewBox="0 0 240 65" {...props}>
      <g filter="url(#filter0_i)">
        <path
          d="M10.0001 49.2757L10.0003 64H234L234 49.2753C234 42.5136 229.749 36.4819 223.381 34.2077L138.48 3.8859C127.823 0.0796983 116.177 0.0796931 105.519 3.8859L20.6188 34.2076C14.2508 36.4819 10.0001 42.5138 10.0001 49.2757Z"
          fill={fill}
        />
      </g>
      <defs>
        <filter
          id="filter0_i"
          x="10.0001"
          y="1.03125"
          width="224"
          height="62.9688"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="1" />
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
          <feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
        </filter>
      </defs>
    </Svg>
  )
}

function TabbedPanelLayout({
  currentTab,
  onTabClick,
  tabs,
  showCloseButton,
  collapsed,
  onClose,
}: Props) {
  const theme = useTheme();

  if (collapsed === true) {
    return (
      <VerticalTabGroup>
        {tabs.map((t) => (
          <Tab key={t.id}>
            <TabIcon
              title={t.label}
              className={`elyricon elyricon-${t.id}`}
              onClick={() => {
                onTabClick?.(t.id);
              }}
            >
              {t.icon}
            </TabIcon>
          </Tab>
        ))}
      </VerticalTabGroup>
    );
  }

  const resolvedCurrentTab = currentTab === undefined ? tabs[0].id : currentTab;

  return (
    <React.Fragment>
      <ActionBar>
        <HorizontalTabGroup>
          {tabs.map((t) => (
            <Tab key={t.id}>
              <Label
                title={t.title}
                active={resolvedCurrentTab === t.id}
                onClick={() => {
                  onTabClick?.(t.id);
                }}
              >
                {t.label}
              </Label>
            </Tab>
          ))}
        </HorizontalTabGroup>
        {showCloseButton === true && (
          <StyledIconButton
            title="Close Panel"
            className="elyricon elyricon-close"
            onClick={() => {
              onClose?.();
            }}
          >
            {theme.overrides?.closeIcon}
          </StyledIconButton>
        )}
      </ActionBar>
      <Content>
        {tabs.find((t) => t.id === resolvedCurrentTab)?.content ??
          "Invalid tab id."}
      </Content>
    </React.Fragment>
  );
}