All files / app/features/communities/CommunityPage TitleWithIcon.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
4x
 
4x
 
64x
 
 
 
 
64x
 
 
 
 
 
 
 
 
 
 
64x
 
 
 
 
 
 
 
 
 
 
 
 
import { styled, Typography } from "@mui/material";
import { ReactNode } from "react";
import { theme } from "theme";
 
const StyledWrapper = styled("div")(() => ({
  alignItems: "center",
  display: "flex",
}));
 
const StyledText = styled(Typography)(() => ({
  margin: 0,
  marginInlineStart: theme.spacing(1),
}));
 
interface TitleWithIconProps {
  icon: ReactNode;
  children: string;
  variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}
 
export default function TitleWithIcon({
  icon,
  children,
  variant = "h1",
}: TitleWithIconProps) {
  return (
    <StyledWrapper>
      {icon}
      <StyledText variant={variant}>{children}</StyledText>
    </StyledWrapper>
  );
}