# ログイン画面の作成3 `LoginPage.tsx`をリファクタします。 `components/atoms`配下に、`Input.tsx`を作成しましょう。こちらに関して、inputタグの元々の属性全て受け取れるようにするため`props`を受け取り、`{...props}`としてプロパティを全て展開してinputタグに渡すようにします。 propsの型に関しては、`ComponentProps<"input">`とすることで、inputタグの全ての属性の型を宣言することができます。

import { ComponentProps } from "react";

export const Input = (props: ComponentProps<"input">) => {
  return (
    <input
      {...props}
      className="w-full border-4 border-solid border-lime-800 rounded-md p-2"
    />
  );
};

では、こちらのInputコンポーネントを`LoginPage.tsx`にて呼び出しましょう。

import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";

export const LoginPage = () => {
  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10">
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        <div className="w-[80%]">
          <Input
            type="text"
            placeholder="email"
          />
        </div>
        <div className="w-[80%]">
          <Input
            type="password"
            placeholder="password"
          />
        </div>
        <PrimaryBtn>ログイン</PrimaryBtn>
      </form>
    </div>
  );
};

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` refactor: ログイン画面のinputタグをコンポーネントに切り出した ``` としましょう。