ThunderNetworkRaD/react-components
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added support for classnames in typography

Browse source
This commit is contained in:
killerboss 2024-10-31 19:36:52 +01:00
parent 9846490b87
commit c08bcd69b3
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
typography.tsx
View file

@ -1,15 +1,17 @@
"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="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", this.props.className)}>
{this.props.children}
</h1>
);
@ -19,7 +21,7 @@ export class H1 extends React.Component<Props> {
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">
<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>
);
@ -29,7 +31,7 @@ export class H2 extends React.Component<Props> {
export class H3 extends React.Component<Props> {
render() {
return (
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
<h3 className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", this.props.className)}>
{this.props.children}
</h3>
);
@ -39,7 +41,7 @@ export class H3 extends React.Component<Props> {
export class H4 extends React.Component<Props> {
render() {
return (
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
<h4 className={cn("scroll-m-20 text-xl font-semibold tracking-tight", this.props.className)}>
{this.props.children}
</h4>
);
@ -49,7 +51,7 @@ export class H4 extends React.Component<Props> {
export class P extends React.Component<Props> {
render() {
return (
<p className="leading-7 [&:not(:first-child)]:mt-6">
<p className={cn("leading-7 [&:not(:first-child)]:mt-6", this.props.className)}>
{this.props.children}
</p>
);
@ -59,7 +61,7 @@ export class P extends React.Component<Props> {
export class Blockquote extends React.Component<Props> {
render() {
return (
<blockquote className="mt-6 border-l-2 pl-6 italic">
<blockquote className={cn("mt-6 border-l-2 pl-6 italic", this.props.className)}>
{this.props.children}
</blockquote>
);
@ -69,7 +71,7 @@ export class Blockquote extends React.Component<Props> {
export class Table extends React.Component<Props> {
render() {
return (
<div className="my-6 w-full overflow-y-auto">
<div className={cn("my-6 w-full overflow-y-auto", this.props.className)}>
<table className="w-full">
{this.props.children}
</table>
@ -91,7 +93,7 @@ export class TableHead extends React.Component<Props> {
export class Tr extends React.Component<Props> {
render() {
return (
<tr className="m-0 border-t p-0 even:bg-muted">
<tr className={cn("m-0 border-t p-0 even:bg-muted", this.props.className)}>
{this.props.children}
</tr>
);
@ -101,7 +103,7 @@ export class Tr extends React.Component<Props> {
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">
<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>
);
@ -111,7 +113,7 @@ export class Th extends React.Component<Props> {
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">
<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>
);