components MusicWebStatusBanner.tsx

0% Statements 0/10

100% Branches 0/0

0% Functions 0/3

0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import styled from "styled-components";
import { Button } from "ui/buttons/Button";
 
const StyledBanner = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: ${(props) => props.theme.colors.highlightText};
  background: ${(props) => props.theme.colors.highlight};
  box-sizing: border-box;
`;
 
const StyledBannerText = styled.div`
  flex-grow: 1;
`;
 
interface MusicWebStatusBannerProps {
  title: string;
  actionLabel: string;
  onAction: () => void;
}
 
export const MusicWebStatusBanner = ({
  title,
  actionLabel,
  onAction,
}: MusicWebStatusBannerProps) => {
  return (
    <StyledBanner onClick={onAction}>
      <StyledBannerText>{title}</StyledBannerText>
      <Button variant="primary">{actionLabel}</Button>
    </StyledBanner>
  );
};