121 lines
No EOL
3.1 KiB
TypeScript
121 lines
No EOL
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|
|
} |