Breaking News: Grepper is joining You.com. Read the official announcement!

react paragraph component

Azizul7m answered on March 31, 2023 Popularity 6/10 Helpfulness 1/10

answer react paragraph component

react paragraph component

Comment

// import { cn } from '@/lib/utils'
import { cva, VariantProps } from 'class-variance-authority'
import {} from 'clsx'
import { HTMLAttributes, forwardRef } from 'react'

import { clsx, ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export  function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}


export const paragraphVariants = cva(
    'max-w-prose text-slate-700 dark:text-slate-300 mb-2 text-center',
    {
        variants: {
            size: {
                default: 'text-base sm:text-lg',
                sm: 'text-sm sm:text-base ',
            },
        },
        defaultVariants: {
            size: 'default',
        },
    }
)


interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof paragraphVariants> {};
const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(({ className,size ,children, ...props }, ref) => {
    return (
        <p
            ref={ref}
            {...props}
            className={cn(paragraphVariants({size, className}))}
        >
            {children}
            </p>
    )
})
Paragraph.displayName="Paragraph";
export default Paragraph;

Popularity 6/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: paragraph typescript

Link to this answer
Share Copy Link

Contributed on Mar 31 2023

Azizul7m

0 Answers Avg Quality 2/10

react paragraph component

Contents

More Related Answers

react paragraph component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.