Heading

1import { cva, type VariantProps } from "class-variance-authority";
2import { Text } from "react-native";
3import { cn } from "../lib/utils";
4 
5// Types
6export type HeadingProps = React.ComponentProps<typeof Text> &
7  VariantProps<typeof headingVariants>;
8 
9// Components
10export const Heading = ({
11  children,
12  className,
13  level,
14  ...props
15}: HeadingProps) => {
16  return (
17    <Text className={cn(headingVariants({ className, level }))} {...props}>
18      {children}
19    </Text>
20  );
21};
22 
23// Styles
24const headingVariants = cva("font-bold text-foreground tracking-tight", {
25  defaultVariants: {
26    level: "1",
27  },
28  variants: {
29    level: {
30      "1": "text-4xl",
31      "2": "text-3xl",
32      "3": "text-2xl",
33      "4": "text-xl",
34      "5": "text-lg",
35      "6": "text-base",
36    },
37  },
38});