add titles (#256)

src/components/label/label-variants.tsx

@@ -0,0 +1,5 @@
+import { cva } from 'class-variance-authority';
+
+export const labelVariants = cva(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);

src/components/label/label.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-);
+import { labelVariants } from './label-variants';
 
 const Label = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,

src/pages/editor-page/top-navbar/top-navbar.tsx

@@ -49,6 +49,8 @@ import { deMetadata } from '@/i18n/locales/de';
 import { jaMetadata } from '@/i18n/locales/ja';
 import { useLocalConfig } from '@/hooks/use-local-config';
 import { frMetadata } from '@/i18n/locales/fr';
+import { cn } from '@/lib/utils';
+import { labelVariants } from '@/components/label/label-variants';
 
 export interface TopNavbarProps {}
 
@@ -266,7 +268,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                         </>
                     ) : (
                         <>
-                            <Label>{diagramName}</Label>
+                            <h1 className={cn(labelVariants())}>
+                                {diagramName}
+                            </h1>
                             <Button
                                 variant="ghost"
                                 className="hidden size-7 p-2 text-slate-500 hover:bg-primary-foreground hover:text-slate-700 group-hover:flex dark:text-slate-400 dark:hover:text-slate-300"

src/pages/examples-page/examples-page.tsx

@@ -40,11 +40,11 @@ const ExamplesPageComponent: React.FC = () => {
                 <div className="hidden flex-1 justify-end sm:flex"></div>
             </nav>
             <div className="flex flex-col px-3 pt-3 text-center md:px-28 md:text-left">
-                <div className="font-primary text-2xl font-bold">Examples</div>
-                <div className="mt-1 font-primary text-base text-muted-foreground">
+                <h1 className="font-primary text-2xl font-bold">Examples</h1>
+                <h2 className="mt-1 font-primary text-base text-muted-foreground">
                     A collection of examples to help you get started with
                     ChartDB.
-                </div>
+                </h2>
                 <div className="mt-6 grid grid-flow-row grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                     {examples.map((example) => (
                         <ExampleCard key={example.id} example={example} />