packages/ui: add heading

apps/web/app/ius/[slug]/page.tsx

@@ -1,5 +1,4 @@
 import * as apiIUS from '@/api/ius/query';
-import type { Request } from '@/api/ius/types';
 import { Form } from '@/components/Form';
 import type { Metadata } from 'next';
 
@@ -22,21 +21,10 @@ export async function generateMetadata({ params, searchParams }: Props): Promise
   };
 }
 
-export default async function Page(props: Props) {
-  const data = await getData({
-    searchParams: props.searchParams,
-    slug: props.params.slug,
-  });
+export default async function Page({ params, searchParams }: Props) {
+  const data = await apiIUS.getData({ searchParams, ...params });
+  const metaData = await apiIUS.getMetaData({ searchParams, ...params });
+  const { title } = await apiIUS.getConfig({ searchParams, ...params });
 
-  return <Form {...data} />;
-}
-
-async function getData(params: Request) {
-  const data = await apiIUS.getData(params);
-  const metaData = await apiIUS.getMetaData(params);
-
-  return {
-    data,
-    metaData,
-  };
+  return <Form data={data} metaData={metaData} title={title} />;
 }

apps/web/components/Form.tsx

@@ -1,16 +1,18 @@
 import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
 import { mapFieldTypeElement } from '@/config/elements';
-import { Background, Button, Divider, ElementContainer } from 'ui';
+import { Background, Button, Divider, ElementContainer, Heading } from 'ui';
 
 type Props = {
   readonly data: ResponseGetData;
   readonly metaData: ResponseMetaData;
+  readonly title: string;
 };
 
-export function Form({ data, metaData }: Props) {
+export function Form({ data, metaData, title }: Props) {
   return (
     <Background>
-      <div className="grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 ">
+      <Heading size={2}>{title}</Heading>
+      <div className="mt-1 grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
         {Object.keys(metaData).map((name) => {
           const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
 

packages/ui/heading.tsx

@@ -0,0 +1,37 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
+
+const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight', {
+  defaultVariants: {
+    size: 'default',
+  },
+  variants: {
+    size: {
+      1: 'text-lg sm:text-xl',
+      2: 'text-xl sm:text-2xl',
+      3: 'text-2xl sm:text-3xl',
+      4: 'text-3xl sm:text-4xl',
+      5: 'text-4xl sm:text-5xl',
+      6: 'text-5xl sm:text-6xl',
+      7: 'text-6xl sm:text-7xl',
+      8: 'text-7xl sm:text-8xl',
+      9: 'text-8xl sm:text-9xl',
+      default: 'text-lg',
+    },
+  },
+});
+
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
+  VariantProps<typeof variants> &
+  PropsWithChildren;
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ children, className, size, ...props }, ref) => (
+    <h1 className={cn(variants({ className, size }))} ref={ref} {...props}>
+      {children}
+    </h1>
+  )
+);

packages/ui/index.tsx

@@ -5,4 +5,5 @@ export * from './container';
 export * from './content';
 export * from './divider';
 export * from './header';
+export * from './heading';
 export * from './input';