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"; "use client";
import { cn } from "@/lib/utils";
import React from "react"; import React from "react";
export interface Props { export interface Props {
children?: React.ReactNode; children?: React.ReactNode;
className?: String;
} }
export class H1 extends React.Component<Props> { export class H1 extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</h1> </h1>
); );
@ -19,7 +21,7 @@ export class H1 extends React.Component<Props> {
export class H2 extends React.Component<Props> { export class H2 extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</h2> </h2>
); );
@ -29,7 +31,7 @@ export class H2 extends React.Component<Props> {
export class H3 extends React.Component<Props> { export class H3 extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</h3> </h3>
); );
@ -39,7 +41,7 @@ export class H3 extends React.Component<Props> {
export class H4 extends React.Component<Props> { export class H4 extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</h4> </h4>
); );
@ -49,7 +51,7 @@ export class H4 extends React.Component<Props> {
export class P extends React.Component<Props> { export class P extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</p> </p>
); );
@ -59,7 +61,7 @@ export class P extends React.Component<Props> {
export class Blockquote extends React.Component<Props> { export class Blockquote extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</blockquote> </blockquote>
); );
@ -69,7 +71,7 @@ export class Blockquote extends React.Component<Props> {
export class Table extends React.Component<Props> { export class Table extends React.Component<Props> {
render() { render() {
return ( 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"> <table className="w-full">
{this.props.children} {this.props.children}
</table> </table>
@ -91,7 +93,7 @@ export class TableHead extends React.Component<Props> {
export class Tr extends React.Component<Props> { export class Tr extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</tr> </tr>
); );
@ -101,7 +103,7 @@ export class Tr extends React.Component<Props> {
export class Th extends React.Component<Props> { export class Th extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</th> </th>
); );
@ -111,7 +113,7 @@ export class Th extends React.Component<Props> {
export class Td extends React.Component<Props> { export class Td extends React.Component<Props> {
render() { render() {
return ( 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} {this.props.children}
</td> </td>
); );