TextInput

src/stories/TextInput.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextInput, TextInputProps } from "./TextInput";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<TextInputProps> = {
+  title: "Example/TextInput",
+  component: TextInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Type here",
+    value: "Something",
+  },
+};

src/stories/TextInput.tsx

@@ -0,0 +1,32 @@
+import { ChangeEvent } from "react";
+import "./textinput.css";
+
+export interface TextInputProps {
+  size?: number;
+  value: string;
+  placeholder: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const TextInput = ({
+  placeholder,
+
+  value,
+  onChange,
+  ...props
+}: TextInputProps) => {
+
+
+  return (
+    <input
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+      className="input"
+      {...props}
+    />
+  );
+};

src/stories/textinput.css

@@ -0,0 +1,27 @@
+.input {
+  --input-focus: #2d8cf0;
+  --font-color: #323232;
+  --font-color-sub: #666;
+  --bg-color: #fff;
+  --main-color: #323232;
+  width: 200px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--font-color);
+  padding: 5px 10px;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--font-color-sub);
+  opacity: 0.8;
+}
+
+.input:focus {
+  border: 2px solid var(--input-focus);
+}