add some components

2023-11-08 12:02:00 +03:00 · 2023-11-08 12:02:00 +03:00 · 7b42fd4548
commit 7b42fd4548
parent 341d0d7219
25 changed files with 432 additions and 172 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -18,9 +18,7 @@
    "source.removeUnusedImports": true
  },
  "workbench.editor.labelFormat": "short",
-  "eslint.workingDirectories": [
-    { "directory": "apps/web", "changeProcessCWD": true }
-  ],
+  "eslint.workingDirectories": [{ "directory": "apps/web", "changeProcessCWD": true }],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
@ -29,5 +27,9 @@
    "typescriptreact",
    "yaml"
  ],
-  "eslint.lintTask.enable": true
+  "eslint.lintTask.enable": true,
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@ -3,25 +3,18 @@
@tailwind utilities;

 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --color-background: #f9fafb;
+  /* --color-background: #f3f4f6; */
 }

-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
-}
+} */

 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: var(--color-background);
 }
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@ -1,6 +1,8 @@
 import './globals.css';
+import { Auth, Logo } from '@/components/layout';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { Header } from 'ui';

 const inter = Inter({ subsets: ['latin'] });

@ -11,8 +13,14 @@ export const metadata: Metadata = {

 export default function RootLayout({ children }: { readonly children: React.ReactNode }) {
  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="ru" translate="no">
+      <body className={inter.className}>
+        <Header>
+          <Logo />
+          <Auth />
+        </Header>
+        {children}
+      </body>
    </html>
  );
 }
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@ -1,113 +1,213 @@
-/* eslint-disable react/jsx-newline */
-/* eslint-disable react/forbid-component-props */
-import Image from 'next/image';
+/* eslint-disable unicorn/no-unused-properties */
+import { Background, Button, Content, Input } from 'ui';

-export default function Home() {
+const mockMeta = {
+  accountName: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Контраген',
+    required: false,
+    visible: true,
+  },
+  ageDrivers: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Ограничение лиц, допущенных к управлению',
+    required: false,
+    visible: true,
+  },
+  comment: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Комментарий',
+    required: false,
+    visible: true,
+  },
+  dgoPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'ДГО',
+    required: false,
+    visible: true,
+  },
+  enginePower: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'л.с',
+    required: false,
+    visible: true,
+  },
+  evokaskoPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'Evo_КАСКО',
+    required: false,
+    visible: true,
+  },
+  expDrivers: {
+    disable: true,
+    fieldType: 'INT',
+    label: 'Наименьший стаж водителей',
+    required: false,
+    visible: true,
+  },
+  franchise: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'Франшиза',
+    required: false,
+    visible: true,
+  },
+  inn: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'ИНН',
+    required: false,
+    visible: true,
+  },
+  inspectionRequired: {
+    disable: true,
+    fieldType: 'CHECKBOX',
+    label: 'Требуется осмотр',
+    required: false,
+    visible: true,
+  },
+  insurancePrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'ФинGAP',
+    required: false,
+    visible: true,
+  },
+  kaskoPrice: {
+    disable: false,
+    fieldType: 'DECIMAL',
+    label: 'КАСКО/СМР',
+    required: false,
+    visible: true,
+  },
+  kpp: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'КПП',
+    required: false,
+    visible: true,
+  },
+  leasingobjectCategory: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Ктегория ТС',
+    required: false,
+    visible: true,
+  },
+  leasingobjectYear: {
+    disable: true,
+    fieldType: 'INT',
+    label: 'Год выпуска',
+    required: false,
+    visible: true,
+  },
+  newPolicy: {
+    disable: true,
+    fieldType: 'CHECKBOX',
+    label: 'Требуется оформление нового полиса',
+    required: false,
+    visible: true,
+  },
+  nsPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'НС',
+    required: false,
+    visible: true,
+  },
+  nsibPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'НСиБ',
+    required: false,
+    visible: true,
+  },
+  osagoPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'ОСАГО',
+    required: false,
+    visible: true,
+  },
+  passportBrandModel: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'ТС',
+    required: false,
+    visible: true,
+  },
+  polisNumber: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Полис',
+    required: false,
+    visible: true,
+  },
+  risk: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'Риски',
+    required: false,
+    visible: true,
+  },
+  territoryPrice: {
+    disable: true,
+    fieldType: 'DECIMAL',
+    label: 'Расширение',
+    required: false,
+    visible: true,
+  },
+  vin: {
+    disable: true,
+    fieldType: 'STRING',
+    label: 'VIN/Заводской номер машины',
+    required: false,
+    visible: true,
+  },
+};
+
+const mockData = {
+  accountName: 'ООО "КУПЕР"',
+  ageDrivers: 'Без ограничений',
+  enginePower: 149,
+  expDrivers: 0,
+  franchise: 0,
+  leasingobjectCategory: '100000001',
+  leasingobjectYear: 2021,
+  passportBrandModel: '3008A1',
+  polisNumber: '0002810-0000103/23ТЮЛ',
+  risk: 'КАСКО, ДГО, НС',
+  vin: 'XZV3008A1M0000016',
+};
+
+export default function Page() {
  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
+    <Content>
+      <Background>
+        <div className="grid auto-rows-auto grid-cols-2 gap-2 ">
+          {Object.keys(mockData).map((name) => (
+            <Input
+              key={name}
+              id={name}
+              title={mockMeta[name].label}
+              type="text"
+              required={mockMeta[name].required}
+              defaultValue={mockData[name]}
            />
-          </a>
+          ))}
        </div>
-      </div>
-
-      <div className="before:bg-gradient-radial after:bg-gradient-conic relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+        <div className="grid grid-cols-3 gap-5 pt-3">
+          <Button>Сохранить</Button>
+          <Button>Возврат на доработку</Button>
+          <Button color="danger">Отмена</Button>
+        </div>
+      </Background>
+    </Content>
  );
 }
--- a/apps/web/components/layout/auth.tsx
+++ b/apps/web/components/layout/auth.tsx
@ -0,0 +1,9 @@
+export function Auth() {
+  return (
+    <div>
+      <a href="/logout" className="text-primary-800 text-sm">
+        Выход
+      </a>
+    </div>
+  );
+}
--- a/apps/web/components/layout/index.ts
+++ b/apps/web/components/layout/index.ts
@ -0,0 +1,2 @@
+export * from './auth';
+export * from './logo';
--- a/apps/web/components/layout/logo.tsx
+++ b/apps/web/components/layout/logo.tsx
@ -0,0 +1,6 @@
+import Image from 'next/image';
+import logo from 'public/assets/images/logo-primary.svg';
+
+export function Logo() {
+  return <Image priority alt="logo" src={logo} height="24" />;
+}
--- a/apps/web/constants/colors.ts
+++ b/apps/web/constants/colors.ts
@ -0,0 +1,11 @@
+export const COLORS_PROD = {
+  COLOR_DANGER: '#D10000',
+  COLOR_PRIMARY: '#1C01A9',
+  COLOR_SECONDARY: '#3A0185',
+  COLOR_TERTIARTY: '#580161',
+};
+export const COLORS_DEV = {
+  COLOR_PRIMARY: '#BF3676',
+  COLOR_SECONDARY: '#FD4047',
+  COLOR_TERTIARTY: '#FF9112',
+};
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -12,7 +12,9 @@
    "next": "^14",
    "react": "^18",
    "react-dom": "^18",
-    "tsconfig": "*"
+    "tailwind-tints": "^1.1.0",
+    "tsconfig": "*",
+    "ui": "*"
  },
  "devDependencies": {
    "@types/node": "^20",
--- a/apps/web/public/assets/images/logo-primary.svg
+++ b/apps/web/public/assets/images/logo-primary.svg
@ -0,0 +1,31 @@
+<svg width="217" height="32" viewBox="0 0 217 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.1704 0C6.82137 0 3.8457 2.97567 3.8457 2.97567L6.91293 6.59226C6.91293 6.59226 8.19476 5.08153 11.2162 5.08153C14.2377 5.08153 17.7627 7.09584 17.7627 11.216C17.7627 15.3362 14.4666 17.8998 11.3078 17.8998C8.14898 17.8998 6.91293 15.9771 6.91293 15.9771L3.8457 19.5479C3.8457 19.5479 6.91293 22.5236 11.1704 22.5236C15.4279 22.5236 22.4322 19.319 22.4322 11.2618C22.4322 3.20457 15.5195 0 11.1704 0Z"
+        fill="#1C01A9" />
+    <path
+        d="M11.6765 14.51C13.3949 14.4578 14.7456 13.0224 14.6934 11.304C14.6412 9.58559 13.2058 8.23486 11.4874 8.28707C9.76902 8.33927 8.4183 9.77464 8.4705 11.493C8.52271 13.2115 9.95807 14.5622 11.6765 14.51Z"
+        fill="#1C01A9" />
+    <path
+        d="M11.5822 27.8798C8.24031 27.8798 5.03575 26.9185 2.2432 25.1331L0 28.6123C3.43346 30.8097 7.46206 32 11.5822 32C15.2904 32 18.9527 31.0386 22.2031 29.2074L20.143 25.6366C17.5336 27.1016 14.6037 27.8798 11.5822 27.8798Z"
+        fill="#1C01A9" />
+    <path
+        d="M42.8496 10.8954C44.4976 10.8954 45.7337 7.50769 45.7337 6.18009C45.7337 4.85248 44.3145 0.503418 38.5463 0.503418C32.778 0.503418 29.665 0.503418 29.665 0.503418V22.0198C29.665 22.0198 34.2888 22.0198 39.7365 22.0198C45.1843 22.0198 46.6493 18.6321 46.6493 16.1143C46.6035 13.5964 44.4976 10.8954 42.8496 10.8954ZM34.243 4.5778C34.243 4.5778 35.9368 4.5778 38.1343 4.5778C40.3317 4.5778 40.6979 6.18009 40.6979 6.86678C40.6979 7.55347 40.4232 9.24732 37.0813 9.24732C36.7151 9.24732 34.2888 9.24732 34.2888 9.24732V4.5778H34.243ZM39.4161 17.4419C37.8138 17.4419 34.2888 17.4419 34.2888 17.4419V13.3217C34.2888 13.3217 37.4018 13.3217 39.0956 13.3217C40.7895 13.3217 41.5677 13.9626 41.5677 15.2902C41.5677 16.6178 41.0184 17.4419 39.4161 17.4419Z"
+        fill="#1C01A9" />
+    <path
+        d="M63.4047 0C57.2703 0 52.2803 5.03575 52.2803 11.2618C52.2803 17.4878 57.2703 22.5236 63.4047 22.5236C69.5392 22.5236 74.5292 17.4878 74.5292 11.2618C74.5292 5.03575 69.5392 0 63.4047 0ZM63.1758 17.9456C59.6508 17.9456 56.8125 14.9699 56.8125 11.2618C56.8125 7.55363 59.6508 4.57796 63.1758 4.57796C66.7008 4.57796 69.5392 7.55363 69.5392 11.2618C69.5392 14.9699 66.7008 17.9456 63.1758 17.9456Z"
+        fill="#1C01A9" />
+    <path
+        d="M125.207 0C119.805 0 115.273 3.93704 114.266 9.11014L110.695 9.65949V0.503575H105.659V22.02H110.649V14.1917L114.266 13.505C115.273 18.6781 119.805 22.5693 125.161 22.5693C131.296 22.5693 136.286 17.5336 136.286 11.3076C136.377 5.03575 131.387 0 125.207 0ZM125.024 17.9456C121.499 17.9456 118.661 14.9699 118.661 11.2618C118.661 7.55363 121.499 4.57796 125.024 4.57796C128.549 4.57796 131.387 7.55363 131.387 11.2618C131.387 14.9699 128.549 17.9456 125.024 17.9456Z"
+        fill="#1C01A9" />
+    <path
+        d="M86.9353 0.503418L78.1914 22.0198H83.6849L88.7665 9.24732L89.0869 9.20154L94.3515 22.0198H99.4788L90.735 0.503418H86.9353Z"
+        fill="#1C01A9" />
+    <path d="M162.38 0.503418H157.482V17.3961H147.227V0.503418H142.604V22.0198H165.814V17.4876H162.38V0.503418Z"
+        fill="#1C01A9" />
+    <path
+        d="M177.716 13.3217V0.503418H172.543V22.0198H177.167L187.192 8.69796V22.0198H192.228V0.503418H187.467L177.716 13.3217Z"
+        fill="#1C01A9" />
+    <path
+        d="M208.664 0.503418C204.269 0.503418 199.096 1.09855 199.096 7.69081C199.096 11.1701 200.927 13.5048 203.216 14.3289C201.201 16.7552 197.539 22.0198 197.539 22.0198H203.902L208.755 15.0155H211.822V22.0198H216.904V0.503418C216.95 0.503418 213.104 0.503418 208.664 0.503418ZM211.96 11.0327C211.96 11.0327 210.678 11.0327 207.702 11.0327C204.726 11.0327 204.589 8.92686 204.589 7.69081C204.589 6.45476 205.001 4.94404 207.885 4.94404C210.769 4.94404 211.96 4.94404 211.96 4.94404V11.0327Z"
+        fill="#1C01A9" />
+</svg>
--- a/apps/web/public/next.svg
+++ b/apps/web/public/next.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/apps/web/public/vercel.svg
+++ b/apps/web/public/vercel.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@ -1,20 +1,30 @@
-import type { Config } from 'tailwindcss'
+import { COLORS_PROD } from './constants/colors';
+import tailwindTints from 'tailwind-tints';
+import type { Config } from 'tailwindcss';
+
+const tints = tailwindTints({
+  primary: COLORS_PROD.COLOR_PRIMARY,
+  secondary: COLORS_PROD.COLOR_SECONDARY,
+  tertiarty: COLORS_PROD.COLOR_TERTIARTY,
+  danger: COLORS_PROD.COLOR_DANGER,
+});

 const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
+    // extend: {
+    //   colors: {
+    //     primary: COLORS_PROD.COLOR_PRIMARY,
+    //     secondary: COLORS_PROD.COLOR_SECONDARY,
+    //     tertiarty: COLORS_PROD.COLOR_TERTIARTY,
+    //   },
+    // },
  },
-  plugins: [],
-}
-export default config
+  plugins: [tints],
+};
+export default config;
--- a/packages/ui/.eslintrc.js
+++ b/packages/ui/.eslintrc.js
@ -5,4 +5,9 @@ module.exports = createConfig('react-typescript', {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
+  rules: {
+    'react/forbid-component-props': 'off',
+    'import/no-duplicates': 'off',
+  },
+  ignorePatterns: ['*.config.js', '.eslintrc.js'],
 });
--- a/packages/ui/background.tsx
+++ b/packages/ui/background.tsx
@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+
+export function Background({ children }: PropsWithChildren) {
+  return <div className="rounded-sm border border-slate-100 bg-white p-5 ">{children}</div>;
+}
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@ -0,0 +1,25 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+const variants = cva('rounded-sm px-5 py-2.5 text-sm font-medium text-white', {
+  defaultVariants: {
+    color: 'default',
+  },
+  variants: {
+    color: {
+      danger: 'bg-danger hover:bg-danger-700',
+      default: 'bg-primary hover:bg-primary-700',
+    },
+  },
+});
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, color, ...props }, ref) => (
+    <button type="button" className={cn(variants({ className, color }))} ref={ref} {...props} />
+  )
+);
--- a/packages/ui/card.tsx
+++ b/packages/ui/card.tsx
@ -1,27 +0,0 @@
-import * as React from "react";
-
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}
--- a/packages/ui/content.tsx
+++ b/packages/ui/content.tsx
@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+
+export function Content({ children }: PropsWithChildren) {
+  return <div className="flex justify-center gap-2">{children}</div>;
+}
--- a/packages/ui/header.tsx
+++ b/packages/ui/header.tsx
@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type Props = {
+  readonly children?: React.ReactNode;
+};
+
+export function Header({ children }: Props) {
+  return (
+    <header className={['sticky', 'flex justify-center', 'h-16','bg-white'].join(' ')}>
+      <div className={['w-1/2','m-0','flex items-center justify-between'].join(' ')}>{children}</div>
+    </header>
+  );
+}
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@ -1,2 +1,5 @@
-// component exports
-export { Card } from "./card";
+export * from './background';
+export * from './button';
+export * from './content';
+export * from './header'
+export * from './input'
--- a/packages/ui/input.tsx
+++ b/packages/ui/input.tsx
@ -0,0 +1,29 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+
+const variants = cva(
+  'block w-full rounded-sm border border-gray-300 p-2 text-sm text-gray-900 outline-none transition-all ease-linear hover:border-primary-500 hover:transition-all focus:border-primary-500 focus:transition-all'
+);
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  VariantProps<typeof variants>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
+  <div className="flex flex-col">
+    <label
+      htmlFor={props.id}
+      className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
+    >
+      {props.title}
+    </label>
+    <input
+      ref={ref}
+      type={props.type}
+      id={props.id}
+      className={cn(variants({ className }))}
+      {...props}
+    />
+  </div>
+));
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -14,7 +14,10 @@
    "@types/react": "^18.2.34",
    "@types/react-dom": "^18.2.14",
    "@vchikalkin/eslint-config-awesome": "^1.1.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
    "react": "^18.2.0",
+    "tailwind-merge": "^2.0.0",
    "tsconfig": "*",
    "typescript": "^5.2.2"
  }
--- a/packages/ui/turbo/generators/templates/component.hbs
+++ b/packages/ui/turbo/generators/templates/component.hbs
@ -6,9 +6,8 @@ interface Props {

 export const {{ pascalCase name }} = ({ children }: Props) => {
  return (
-    <div>
-      <h1>{{ name }}</h1>
+    <{{ name }}>
      {children}
-    </div>
+    </{{ name }}>
  );
 };
--- a/packages/ui/utils.ts
+++ b/packages/ui/utils.ts
@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
--- a/yarn.lock
+++ b/yarn.lock
@ -208,7 +208,7 @@
    core-js-pure "^3.30.2"
    regenerator-runtime "^0.14.0"

-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2":
  version "7.23.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@ -1557,6 +1557,13 @@ ci-info@^3.8.0:
  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==

+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 clean-regexp@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/clean-regexp/-/clean-regexp-1.0.0.tgz#8df7c7aae51fd36874e8f8d05b9180bc11a3fed7"
@ -1611,6 +1618,11 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==

+clsx@2.0.0, clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -5302,6 +5314,18 @@ synckit@^0.8.5:
    "@pkgr/utils" "^2.3.1"
    tslib "^2.5.0"

+tailwind-merge@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.0.0.tgz#a0f3a8c874ebae5feec5595614d08245a5f88a39"
+  integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+
+tailwind-tints@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tailwind-tints/-/tailwind-tints-1.1.0.tgz#38d6d8a850738d0ee869a3b1101bf740281f4a60"
+  integrity sha512-05Dlsz765xP8xqCqDZGToRDcdJupXPkTQgUtNqGoNwQr3Ibiioy1IF2NIEhzso2uy4YrCHWx24caUXh6aCd5tw==
+
 tailwindcss@^3.3.5:
  version "3.3.5"
  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>