frontend/src/pages/Settings/components/Card.tsx


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
50
51

import { FunctionComponent } from "react";
import {
  Center,
  MantineStyleProp,
  Stack,
  Text,
  UnstyledButton,
} from "@mantine/core";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import TextPopover from "@/components/TextPopover";
import styles from "./Card.module.scss";

interface CardProps {
  description?: string;
  header?: string;
  lineClamp?: number | undefined;
  onClick?: () => void;
  plus?: boolean;
  titleStyles?: MantineStyleProp | undefined;
}

export const Card: FunctionComponent<CardProps> = ({
  header,
  description,
  plus,
  onClick,
  lineClamp,
  titleStyles,
}) => {
  return (
    <UnstyledButton p="lg" onClick={onClick} className={styles.card}>
      {plus ? (
        <Center>
          <FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon>
        </Center>
      ) : (
        <Stack h="100%" gap={0}>
          <Text fw="bold" style={titleStyles}>
            {header}
          </Text>
          <TextPopover text={description}>
            <Text hidden={description === undefined} lineClamp={lineClamp}>
              {description}
            </Text>
          </TextPopover>
        </Stack>
      )}
    </UnstyledButton>
  );
};