pembuatan component storybook input

front_end_portserver/src/stories/loginPage/Input.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { InputWithLabel, } from "./Inputs";
+
+import mail from "@/assets/mail.svg"
+import lock from "@/assets/lock-closed.svg"
+
+const meta = {
+    title: "Input",
+    component: InputWithLabel,
+
+} satisfies Meta<typeof InputWithLabel>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomInput:Story = {
+    args: {
+        labelValue      : 'Custom Input',
+        typeName        : 'Custom your Type of Input',
+        placeHolderName : 'Custom your placeholder',
+        srcIcon         : mail,
+      },
+}
+
+export const EmailInput: Story = {
+    args: {
+        labelValue  :   'Email',
+        typeName    :   'Email',
+        placeHolderName: 'Input your Email',
+        srcIcon     :   mail,
+        
+    }
+};
+
+export const PasswordInput: Story = {
+    args: {
+        labelValue  :   'Password',
+        typeName    :   'Password',
+        placeHolderName: 'Input your Password',
+        srcIcon     :lock,
+    }
+};
+

front_end_portserver/src/stories/loginPage/Inputs.tsx

@@ -0,0 +1,35 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+import mail from "@/assets/mail.svg"
+import lock from "@/assets/lock-closed.svg"
+import eyeOff from "@/assets/eye-off.svg"
+// import eyeOn from "@/assets/eye-on.svg"
+
+interface InputWithLabelProps {
+    labelValue      ?:  string;
+    typeName        ?:  string;
+    placeHolderName ?:  string;
+    srcIcon         ?:  typeof mail | typeof lock;
+}
+
+export function InputWithLabel({
+  labelValue,
+  typeName,
+  placeHolderName,
+  srcIcon,
+
+}:InputWithLabelProps) {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">{labelValue}</Label>
+      <div>
+        <img src={srcIcon}></img>
+        <Input type={typeName} placeholder={placeHolderName} />
+        {(typeName === 'password' || typeName === 'Password') && (
+          <img src={eyeOff} alt="Icon 2" />
+        )}
+      </div>
+    </div>
+  )
+}