react-components/typography.tsx

"use client";

import React from "react";

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

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

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

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

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

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

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

export class Table extends React.Component<Props> {
    render() {
        return (
            <div className="my-6 w-full overflow-y-auto">
                <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="m-0 border-t p-0 even:bg-muted">
                {this.props.children}
            </tr>
        );
    }
}

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

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