react-components/typography.tsx

"use client";

import { cn } from "@/lib/utils";
import React from "react";

export interface Props {
    children?: React.ReactNode;
    className?: string;
}

export class H1 extends React.Component<Props> {
    render() {
        return (
            <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", this.props.className)}>
                {this.props.children}
            </h1>
        );
    }
}

export class H2 extends React.Component<Props> {
    render() {
        return (
            <h2 className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", this.props.className)}>
                {this.props.children}
            </h2>
        );
    }
}

export class H3 extends React.Component<Props> {
    render() {
        return (
            <h3 className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", this.props.className)}>
                {this.props.children}
            </h3>
        );
    }
}

export class H4 extends React.Component<Props> {
    render() {
        return (
            <h4 className={cn("scroll-m-20 text-xl font-semibold tracking-tight", this.props.className)}>
                {this.props.children}
            </h4>
        );
    }
}

export class P extends React.Component<Props> {
    render() {
        return (
            <p className={cn("leading-7 [&:not(:first-child)]:mt-6", this.props.className)}>
                {this.props.children}
            </p>
        );
    }
}

export class Blockquote extends React.Component<Props> {
    render() {
        return (
            <blockquote className={cn("mt-6 border-l-2 pl-6 italic", this.props.className)}>
                {this.props.children}
            </blockquote>
        );
    }
}

export class Table extends React.Component<Props> {
    render() {
        return (
            <div className={cn("my-6 w-full overflow-y-auto", this.props.className)}>
                <table className="w-full">
                    {this.props.children}
                </table>
            </div>
        );
    }
}

export class TableHead extends React.Component<Props> {
    render() {
        return (
            <thead>
                {this.props.children}
            </thead>
        );
    }
}

export class Tr extends React.Component<Props> {
    render() {
        return (
            <tr className={cn("m-0 border-t p-0 even:bg-muted", this.props.className)}>
                {this.props.children}
            </tr>
        );
    }
}

export class Th extends React.Component<Props> {
    render() {
        return (
            <th className={cn("border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right", this.props.className)}>
                {this.props.children}
            </th>
        );
    }
}

export class Td extends React.Component<Props> {
    render() {
        return (
            <td className={cn("border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right", this.props.className)}>
                {this.props.children}
            </td>
        );
    }
}