feat: update styles

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChangeEvent, useCallback, useReducer, useState } from "react";
+import { ChangeEvent, useReducer, useState } from "react";
 import { InputGroup } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -57,50 +57,56 @@ export default function Home() {
         </div>
       </div>
 
-      <InputGroup
-        length={INPUT_SIZE}
-        label={"Известные позиции букв"}
-        getValues={availablePositionsHandler}
-      />
-      <InputGroup
-        length={INPUT_SIZE}
-        label={"Известные буквы с неверной позицией"}
-        getValues={incorrectPositionsHandler}
-      />
-
-      <div className="flex flex-nowrap flex-col items-center w-80 min-w-80 gap-4">
-        <Label>Известные буквы</Label>
-
-        <div className="flex w-full">
-          <Input
-            type="text"
-            value={state.availableLetters}
-            onChange={availableLettersHandler}
+      <div className="flex flex-row gap-10 flex-nowrap justify-center w-full">
+        <div className="border rounded-2xl flex flex-col flex-nowrap items-center gap-14 p-10 flex-2 self-start">
+          <InputGroup
+            length={INPUT_SIZE}
+            label={"Известные позиции букв"}
+            getValues={availablePositionsHandler}
           />
-        </div>
-      </div>
-
-      <div className="flex flex-nowrap flex-col items-center w-80 min-w-80 gap-4">
-        <Label>Отсутствующие буквы в искомом слове</Label>
-        <div className="flex w-full">
-          <Input
-            type="text"
-            value={state.unavailableLetters}
-            onChange={unavailableLettersHandler}
+          <InputGroup
+            length={INPUT_SIZE}
+            label={"Известные буквы с неверной позицией"}
+            getValues={incorrectPositionsHandler}
           />
-        </div>
-      </div>
 
-      <div>
-        <Button variant={"default"} className="w-60" onClick={clickHandler}>
-          Запуск
-        </Button>
-      </div>
+          <div className="flex flex-nowrap flex-col items-center w-80 min-w-80 gap-4">
+            <Label>Известные буквы</Label>
+
+            <div className="flex w-full">
+              <Input
+                type="text"
+                value={state.availableLetters}
+                onChange={availableLettersHandler}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-nowrap flex-col items-center w-80 min-w-80 gap-4">
+            <Label>Отсутствующие буквы в искомом слове</Label>
+            <div className="flex w-full">
+              <Input
+                type="text"
+                value={state.unavailableLetters}
+                onChange={unavailableLettersHandler}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Button variant={"default"} className="w-60" onClick={clickHandler}>
+              Запуск
+            </Button>
+          </div>
+        </div>
 
-      <div className="flex flex-col align-middle gap-y-3 text-center">
-        {words.map((item) => (
-          <Label key={item}>{item.toUpperCase()}</Label>
-        ))}
+        <div className="border rounded-2xl flex flex-col flex-nowrap items-center gap-14 p-10 w-60 scroll-auto">
+          <div className="flex flex-col align-middle gap-y-3 text-center">
+            {words.map((item) => (
+              <Label key={item}>{item.toUpperCase()}</Label>
+            ))}
+          </div>
+        </div>
       </div>
     </main>
   );

src/lib/search-words.ts

@@ -48,8 +48,6 @@ function searchWord(data: SearchInputData) {
     return acc;
   }, []);
 
-  console.log({ result, data });
-
   return result;
 }