41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import classNames from "classnames";
|
|
import React from "react";
|
|
|
|
import Typography, { ETypo, ETypoColor } from "../Typography";
|
|
import classes from "./classes.module.scss";
|
|
import Button, { EButtonSize, EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
|
|
|
|
type IProps = {
|
|
text: string;
|
|
read: boolean;
|
|
button: IButtonProps;
|
|
className?: string;
|
|
};
|
|
|
|
export default function NotificationBox(props: IProps) {
|
|
const { className, text, button, read } = props;
|
|
|
|
return (
|
|
<div className={classNames(classes["root"], className, !read && classes["unread"])}>
|
|
<div className={classes["content"]}>
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_PRIMARY}>
|
|
{text}
|
|
</Typography>
|
|
<Button
|
|
{...button}
|
|
size={button.size ?? EButtonSize.SM}
|
|
variant={button.variant ?? EButtonVariant.SECONDARY}
|
|
styletype={button.styletype ?? EButtonstyletype.TEXT}>
|
|
{button.children}
|
|
</Button>
|
|
</div>
|
|
|
|
{!read && (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<circle cx="6" cy="6" r="6" fill="#FF4617" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|