Added support for classnames in typography

blog/avatar.tsx

@@ -8,7 +8,7 @@ type Props = {
 const Avatar = ({ name, picture }: Props) => {
   return (
     <div className="flex items-center">
-      <Image src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <Image src={picture} className="rounded-full mr-4" alt={name} width={48} height={48} />
       <div className="text-xl font-bold">{name}</div>
     </div>
   );

cursor.jsx

@@ -43,9 +43,11 @@ export function CursorProvider ({ hidden, enabled, children }) {
         };
     }, []);
 
+    const isTouchDevice = "ontouchstart" in window;
+
     useEffect(() => {
         const htmlElement = document.documentElement;
-        if (isCursorEnabled) {
+        if (isCursorEnabled & !isTouchDevice) {
             htmlElement.classList.add('custom-cursor-enabled-env');
         } else {
             htmlElement.classList.remove('custom-cursor-enabled-env');
@@ -55,7 +57,7 @@ export function CursorProvider ({ hidden, enabled, children }) {
     return (
         <>
             <CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}>
-                {isCursorEnabled ?
+                {isCursorEnabled & !isTouchDevice ?
                     <div
                         ref={cursorRef}
                         className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !isCursorEnabled || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}

typography.tsx

@@ -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>
         );