Section Message

npm install lucide-react

import { css, cx } from "@linaria/core";
import { styled } from "@linaria/react";
import { AlertCircle, CheckCircle } from "lucide-react";
import type React from "react";
 
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "success" | "danger";
  title?: string;
  children: React.ReactNode;
}
 
export default function SectionMessage({
  variant = "success",
  title,
  children,
  className,
  ...props
}: Props) {
  return (
    <Container 
      className={cx(
        baseStyle,
        variant === "success" && successStyle,
        variant === "danger" && dangerStyle,
        className
      )}
      {...props}
    >
      {variant === "success" ? (
        <CheckCircle size={24} strokeWidth={2} />
      ) : (
        <AlertCircle size={24} strokeWidth={2} />
      )}
      <Content>
        {title && <Title>{title}</Title>}
        <Text>{children}</Text>
      </Content>
    </Container>
  );
}
 
const Container = styled.div`
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 16px;
  width: 100%;
  max-width: 586px;
  border-radius: var(--debase__radius);
`;
 
const Content = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
`;
 
const Title = styled.div`
  font-family: var(--debase__font-family);
  font-size: var(--debase__font-size__normal);
  line-height: 1.2;
  font-weight: 400;
`;
 
const Text = styled.div`
  font-family: var(--debase__font-family);
  font-size: var(--debase__font-size__normal);
  line-height: 1.2;
  font-weight: 400;
  color: var(--debase__color__text-sub);
`;
 
const baseStyle = css`
  @layer debase {
    border-width: 1px;
    border-style: solid;
  }
`;
 
const successStyle = css`
  @layer debase {
    background-color: var(--debase__color__background);
    border-color: var(--debase__color__success);
    color: var(--debase__color__success);
    
    ${Title} {
      color: var(--debase__color__success);
    }
  }
`;
 
const dangerStyle = css`
  @layer debase {
    background-color: var(--debase__color__background);
    border-color: var(--debase__color__danger);
    color: var(--debase__color__danger);
    
    ${Title} {
      color: var(--debase__color__danger);
    }
  }
`;