From a4fc68f66e56d5ba7b405c2c1211bd48dac01a89 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 9 Nov 2023 22:03:09 +0300
Subject: [PATCH] packages/ui: add heading

---
 apps/web/app/ius/[slug]/page.tsx | 22 +++++--------------
 apps/web/components/Form.tsx     |  8 ++++---
 packages/ui/heading.tsx          | 37 ++++++++++++++++++++++++++++++++
 packages/ui/index.tsx            |  1 +
 4 files changed, 48 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/heading.tsx

diff --git a/apps/web/app/ius/[slug]/page.tsx b/apps/web/app/ius/[slug]/page.tsx
index beaa47f..371696f 100644
--- a/apps/web/app/ius/[slug]/page.tsx
+++ b/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} />;
 }
diff --git a/apps/web/components/Form.tsx b/apps/web/components/Form.tsx
index 7727a69..3118c7f 100644
--- a/apps/web/components/Form.tsx
+++ b/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];
 
diff --git a/packages/ui/heading.tsx b/packages/ui/heading.tsx
new file mode 100644
index 0000000..f254f9e
--- /dev/null
+++ b/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>
+  )
+);
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 2743c41..8206500 100644
--- a/packages/ui/index.tsx
+++ b/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';