Adding typography components

Author: selfcontained

components/dashboard/src/components/Header.tsx

@@ -8,6 +8,7 @@ import { useEffect } from "react";
 import { useLocation } from "react-router";
 import { Separator } from "./Separator";
 import TabMenuItem from "./TabMenuItem";
+import { Heading1, Subheading } from "./typography/headings";
 
 export interface HeaderProps {
     title: string | React.ReactElement;
@@ -33,8 +34,12 @@ export default function Header(p: HeaderProps) {
         <div className="app-container border-gray-200 dark:border-gray-800">
             <div className="flex pb-8 pt-6">
                 <div className="">
-                    {typeof p.title === "string" ? <h1 className="tracking-tight">{p.title}</h1> : p.title}
-                    {typeof p.subtitle === "string" ? <h2 className="tracking-wide">{p.subtitle}</h2> : p.subtitle}
+                    {typeof p.title === "string" ? <Heading1>{p.title}</Heading1> : p.title}
+                    {typeof p.subtitle === "string" ? (
+                        <Subheading className="tracking-wide">{p.subtitle}</Subheading>
+                    ) : (
+                        p.subtitle
+                    )}
                 </div>
             </div>
             <nav className="flex">

components/dashboard/src/components/typography/headings.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FC } from "react";
+
+type HeadingProps = {
+    className?: string;
+};
+
+export const Heading1: FC<HeadingProps> = ({ className, children }) => {
+    return <h1 className={classNames("text-gray-900 dark:text-gray-100 font-bold text-4xl", className)}>{children}</h1>;
+};
+
+// Intended to be placed beneath a heading to provide more context
+export const Subheading: FC<HeadingProps> = ({ className, children }) => {
+    return <p className={classNames("text-base text-gray-500 dark:text-gray-600", className)}>{children}</p>;
+};