add hashtag input

src/app/styles/globals.css

@@ -79,4 +79,37 @@
     outline: none; /* Remove outline */
     transition: background 0.3s;
   }
+
+  /* English comment: override react-tag-input classes */
+  .ReactTags__tagInputField {
+    @apply bg-transparent text-gray placeholder:text-gray outline-none w-full h-8;
+    @apply border border-white py-[20px] !important;
+    /* English comment: 
+       'bg-transparent' to blend with your dark background 
+       'text-white' to have white text 
+       'placeholder:text-gray-400' to see the placeholder text in a lighter gray 
+       'outline-none' to remove default borders 
+    */
+  }
+
+  /* English comment: style for the tag itself when it's rendered */
+  .ReactTags__selected .ReactTags__tag {
+    @apply bg-[#363636] text-white text-sm inline-flex items-center px-2 py-1 rounded mr-1;
+    /* English comment:
+       'bg-[#363636]' to have a dark gray background
+       'text-white' keeps the text white 
+       'text-sm' smaller text 
+       'inline-flex items-center' for better alignment 
+       'px-2 py-1 rounded mr-1' for spacing and rounding 
+    */
+  }
+
+  .ReactTags__selected .ReactTags__remove {
+    @apply ml-1 text-gray hover:text-white cursor-pointer;
+    /* English comment:
+       'ml-1' a small margin to separate the 'x' or close symbol
+       'text-gray-400' by default, and change to white on hover
+       'cursor-pointer' so it looks clickable
+    */
+  }
 }

src/pages/root/steps/data-step/index.tsx

@@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import ReactPlayer from "react-player/lazy";
+import { WithContext as ReactTagInput } from 'react-tag-input';
 
 import { FormLabel } from "~/shared/ui/form-label";
 import { Input } from "~/shared/ui/input";
@@ -13,6 +14,7 @@ import { HiddenFileInput } from "~/shared/ui/hidden-file-input";
 import { useRootStore } from "~/shared/stores/root";
 import { Checkbox } from "~/shared/ui/checkbox";
 import { AudioPlayer } from "~/shared/ui/audio-player";
+import { HashtagInput } from "~/shared/ui/hashtag-input";
 
 type DataStepProps = {
   nextStep(): void;
@@ -82,6 +84,10 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
             />
           </FormLabel>
 
+          <FormLabel label={"Хэштеги"}>
+            <HashtagInput />
+          </FormLabel>
+
           <FormLabel label={"Файл"}>
             <HiddenFileInput
                 id={"file"}

src/shared/stores/root/index.ts

@@ -44,6 +44,9 @@ type RootStore = {
 
   licenseResalePrice: number;
   setLicenseResalePrice: (licenseResalePrice: number) => void;
+
+  hashtags: string[];
+  setHashtags: (hashtags: string[]) => void;
 };
 
 export const useRootStore = create<RootStore>((set) => ({
@@ -85,4 +88,7 @@ export const useRootStore = create<RootStore>((set) => ({
 
   licenseResalePrice: 0,
   setLicenseResalePrice: (licenseResalePrice) => set({ licenseResalePrice }),
+
+  hashtags: [],
+  setHashtags: (hashtags: string[]) => set({ hashtags }),
 }));

src/shared/ui/hashtag-input/index.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { WithContext as ReactTags } from "react-tag-input";
+import { useRootStore } from "~/shared/stores/root";
+
+// English comment: no extra Tag interface, just cast to any
+export const HashtagInput = () => {
+  const { hashtags, setHashtags } = useRootStore();
+
+  // English comment: local state as string[] for simplicity
+  const [tags, setTags] = useState<string[]>(hashtags);
+
+  const KeyCodes = { comma: 188, enter: 13 };
+  const delimiters = [KeyCodes.comma, KeyCodes.enter];
+
+  const handleDelete = (i: number) => {
+    const newTags = tags.filter((_, index) => index !== i);
+    setTags(newTags);
+    setHashtags(newTags);
+  };
+
+  // English comment: pass "any" to the function
+  const handleAddition = (newTag: any) => {
+    // English comment: newTag might be { id, text, ... } from react-tag-input
+    const updatedTags = [...tags, newTag?.text || newTag?.id || ""];
+    setTags(updatedTags);
+    setHashtags(updatedTags);
+  };
+
+  return (
+    <ReactTags
+      tags={tags.map((t) => ({ id: t, text: t })) as any}
+      delimiters={delimiters as any}
+      handleDelete={handleDelete as any}
+      handleAddition={handleAddition as any}
+      allowDragDrop={false}
+      placeholder="[ enter a hashtag ]"
+    />
+  );
+};