frontPanel/src/ui_kit/QuestionsMiniButton.tsx
2023-12-31 05:53:25 +03:00

56 lines
1.2 KiB
TypeScript
Executable File

import { Button, Typography, useTheme } from "@mui/material";
import Answer from "../assets/icons/questionsPage/answer";
import React from "react";
import { ReactNode } from "react";
interface QuestionsMiniButtonProps {
icon: ReactNode;
text: string;
onClick: () => void;
dataCy?: string;
}
export default function QuestionsMiniButton({
icon,
text,
onClick,
dataCy,
}: QuestionsMiniButtonProps) {
const theme = useTheme();
return (
<>
<Button
variant="outlined"
data-cy={dataCy}
sx={{
padding: "26px 15px 15px 15px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
width: "174px",
height: "140px",
border: "1px solid #9A9AAF",
borderRadius: "8px",
background: "transparent",
}}
onClick={onClick}
>
{icon}
<Typography
sx={{
textAlign: "left",
width: "100%",
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.4px",
color: theme.palette.grey2.main,
}}
>
{text}
</Typography>
</Button>
</>
);
}