53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { VariantProps, cva } from "class-variance-authority";
|
|
import * as React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const textVariants = cva("", {
|
|
variants: {
|
|
variant: {
|
|
default: "leading-7 text-gray-900",
|
|
code: "relative rounded-md bg-gray-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-gray-900",
|
|
lead: "text-gray-700",
|
|
|
|
subtle: "text-gray-500",
|
|
},
|
|
size: {
|
|
xs: "text-xs leading-none",
|
|
sm: "text-sm leading-none",
|
|
lg: "text-lg font-semibold",
|
|
xl: "text-xl font-semibold",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
});
|
|
|
|
export interface TextProps
|
|
extends React.HTMLAttributes<HTMLElement>,
|
|
VariantProps<typeof textVariants> {}
|
|
|
|
const Text = React.forwardRef<HTMLElement, TextProps>(
|
|
({ variant, size, children, ...props }, ref) => {
|
|
switch (variant) {
|
|
case "code":
|
|
return (
|
|
<code className={cn(textVariants({ variant, size }))} ref={ref} {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
|
|
default:
|
|
return (
|
|
<p className={cn(textVariants({ variant, size }))} {...props}>
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|
|
},
|
|
);
|
|
Text.displayName = "Text";
|
|
|
|
export { Text, textVariants };
|