From 7089515e47fb6f7e9aa3db4bbbac2d3300ff0048 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 11 Aug 2024 15:32:47 +0900
Subject: feat(frontend): improve error handling of login form

---
 frontend/app/components/BorderedContainer.tsx | 13 +++++++++++++
 frontend/app/components/InputText.tsx         | 12 ++++++++++++
 frontend/app/components/SubmitButton.tsx      | 12 ++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 frontend/app/components/BorderedContainer.tsx
 create mode 100644 frontend/app/components/InputText.tsx
 create mode 100644 frontend/app/components/SubmitButton.tsx

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/BorderedContainer.tsx b/frontend/app/components/BorderedContainer.tsx
new file mode 100644
index 0000000..cbbfbde
--- /dev/null
+++ b/frontend/app/components/BorderedContainer.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+export default function BorderedContainer({ children }: Props) {
+	return (
+		<div className="bg-white border-2 border-pink-600 rounded-xl p-4">
+			{children}
+		</div>
+	);
+}
diff --git a/frontend/app/components/InputText.tsx b/frontend/app/components/InputText.tsx
new file mode 100644
index 0000000..3f2c526
--- /dev/null
+++ b/frontend/app/components/InputText.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export default function InputText(props: InputProps) {
+	return (
+		<input
+			{...props}
+			className="p-2 block w-full border border-pink-600 rounded-md transition duration-300 focus:ring focus:ring-pink-400 focus:outline-none"
+		/>
+	);
+}
diff --git a/frontend/app/components/SubmitButton.tsx b/frontend/app/components/SubmitButton.tsx
new file mode 100644
index 0000000..1400a7b
--- /dev/null
+++ b/frontend/app/components/SubmitButton.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export default function SubmitButton(props: ButtonProps) {
+	return (
+		<button
+			{...props}
+			className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none"
+		/>
+	);
+}
-- 
cgit v1.2.3-70-g09d2