Socialify

Folder ..

Viewing StatusIndicator.tsx 
49 lines (41 loc) • 1.3 KB

 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
38
39
40
41
42
43
44
45
46
47
48
49
import styled from 'styled-components';
import React, { useMemo } from 'react';

const IndicatorDot = styled.div`
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin: 0rem;
  flex-shrink: 0;
`;

const OngoingIndicator = styled(IndicatorDot)`
  background-color: var(--ongoing-dot-color);
`;

const CompletedIndicator = styled(IndicatorDot)`
  background-color: var(--completed-indicator-color);
`;

const CancelledIndicator = styled(IndicatorDot)`
  background-color: var(--cancelled-indicator-color);
`;

const NotYetAiredIndicator = styled(IndicatorDot)`
  background-color: var(--not-yet-aired-indicator-color);
`;

const DefaultIndicator = styled(IndicatorDot)`
  background-color: var(--default-indicator-color);
`;

export const StatusIndicator: React.FC<{ status: string }> = ({ status }) => {
  const handleStatusCheck = useMemo(() => {
    switch (status) {
      case 'Ongoing':
        return <OngoingIndicator />;
      case 'Completed':
        return <CompletedIndicator />;
      case 'Cancelled':
        return <CancelledIndicator />;
      case 'Not yet aired':
        return <NotYetAiredIndicator />;
      default:
        return <DefaultIndicator />;
    }
  }, [status]); // Ensure all dependencies are correctly listed

  return <>{handleStatusCheck}</>;
};