From 88176e3546e76c680ae83cc27e6266503a161b81 Mon Sep 17 00:00:00 2001
From: RedrockJS <smb.sochi@gmail.com>
Date: Tue, 3 Jun 2025 09:25:29 +0300
Subject: [PATCH] feat: add input

---
 src/core/styles/variables.scss        |  1 +
 src/shared/ui/index.ts                |  1 +
 src/shared/ui/input/index.ts          |  1 +
 src/shared/ui/input/input.module.scss | 14 ++++++++++++++
 src/shared/ui/input/input.tsx         | 22 ++++++++++++++++++++++
 src/views/home/ui/offer/offer.tsx     |  6 +++---
 6 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/shared/ui/input/index.ts
 create mode 100644 src/shared/ui/input/input.module.scss
 create mode 100644 src/shared/ui/input/input.tsx

diff --git a/src/core/styles/variables.scss b/src/core/styles/variables.scss
index 309f036..355a8d8 100644
--- a/src/core/styles/variables.scss
+++ b/src/core/styles/variables.scss
@@ -18,6 +18,7 @@ $color-white: #FFFFFF;
 $color-black: #000000;
 $color-orange: #E96526;
 $color-lightgray: #E4E1E1;
+$color-darkgray: #999999;
 $color-text: #333333;
 $color-text-light: #222222;
 $color-mark: #E96526;
\ No newline at end of file
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 96fd6ed..362df51 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,2 +1,3 @@
 export { Button } from './button';
 export { Mark } from './mark';
+export { Input } from './input';
diff --git a/src/shared/ui/input/index.ts b/src/shared/ui/input/index.ts
new file mode 100644
index 0000000..3f24eca
--- /dev/null
+++ b/src/shared/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './input';
diff --git a/src/shared/ui/input/input.module.scss b/src/shared/ui/input/input.module.scss
new file mode 100644
index 0000000..8c70a12
--- /dev/null
+++ b/src/shared/ui/input/input.module.scss
@@ -0,0 +1,14 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 40px;
+  width: max-content;
+  border: 1px solid $color-darkgray;
+  border-radius: 28px;
+  background: $color-white;
+}
+
+.Input {
+
+}
\ No newline at end of file
diff --git a/src/shared/ui/input/input.tsx b/src/shared/ui/input/input.tsx
new file mode 100644
index 0000000..cd5cfdb
--- /dev/null
+++ b/src/shared/ui/input/input.tsx
@@ -0,0 +1,22 @@
+import s from './input.module.scss';
+import { clsx } from 'clsx';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type InputProps = {
+  outerClassName?: string;
+  variant?: 'default' | 'outlined';
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function input({
+  outerClassName,
+  variant = 'default',
+  ...props
+}: InputProps) {
+  return (
+    <div
+      className={clsx(s.Container, s['Container_' + variant], outerClassName)}
+    >
+      <input {...props} className={clsx(s.Input, s['Input_' + variant])} />
+    </div>
+  );
+}
diff --git a/src/views/home/ui/offer/offer.tsx b/src/views/home/ui/offer/offer.tsx
index f2f8c40..40a23f9 100644
--- a/src/views/home/ui/offer/offer.tsx
+++ b/src/views/home/ui/offer/offer.tsx
@@ -1,6 +1,6 @@
 import s from './offer.module.scss';
 
-import { Button, Mark } from '@shared/ui';
+import { Button, Mark, Input } from '@shared/ui';
 import Image from 'next/image';
 
 import arrow from '@public/svg/arrow-tile.svg';
@@ -37,8 +37,8 @@ export default function Offer() {
         </li>
       </ul>
       <div className={s.RowForm}>
-        <input type='text' placeholder='+79991234567' />
-        <input type='text' placeholder='Ваше имя' />
+        <Input type='text' placeholder='+79991234567' />
+        <Input type='text' placeholder='Ваше имя' />
         <Button>Узнать подробности</Button>
       </div>
       <div className={s.Inner}>