c61748cd6e
<img width="573" alt="Screenshot 2025-03-12 at 17 36 44" src="https://github.com/user-attachments/assets/be6c20b0-626d-4a2c-810c-78a49e9f65ee" /> <img width="579" alt="Screenshot 2025-03-12 at 17 37 03" src="https://github.com/user-attachments/assets/23692ff8-ac88-4104-823e-1a06b3074551" /> <img width="590" alt="Screenshot 2025-03-12 at 17 37 14" src="https://github.com/user-attachments/assets/b46de1d3-a312-44cc-a54d-72208224453d" /> <img width="556" alt="Screenshot 2025-03-12 at 17 37 37" src="https://github.com/user-attachments/assets/12176d49-d76d-4fb1-abe6-1f7dc5349d94" /> <img width="607" alt="Screenshot 2025-03-12 at 17 37 50" src="https://github.com/user-attachments/assets/00e2edff-09db-45c5-a4df-6fd9ead830b6" />
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
|
|
|
|
type H2TitleProps = {
|
|
title: string;
|
|
description?: string;
|
|
adornment?: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledTitleContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
const StyledTitle = styled.h2`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
margin: 0;
|
|
`;
|
|
|
|
const StyledDescription = styled.h3`
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
margin: 0;
|
|
margin-top: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
export const H2Title = ({
|
|
title,
|
|
description,
|
|
adornment,
|
|
className,
|
|
}: H2TitleProps) => (
|
|
<StyledContainer className={className}>
|
|
<StyledTitleContainer>
|
|
<StyledTitle>{title}</StyledTitle>
|
|
{adornment}
|
|
</StyledTitleContainer>
|
|
{description && (
|
|
<StyledDescription>
|
|
<OverflowingTextWithTooltip
|
|
text={description}
|
|
displayedMaxRows={2}
|
|
isTooltipMultiline={true}
|
|
/>
|
|
</StyledDescription>
|
|
)}
|
|
</StyledContainer>
|
|
);
|