diff options
Diffstat (limited to 'frontend/app/components')
| -rw-r--r-- | frontend/app/components/BorderedContainer.tsx | 13 | ||||
| -rw-r--r-- | frontend/app/components/InputText.tsx | 12 | ||||
| -rw-r--r-- | frontend/app/components/SubmitButton.tsx | 12 |
3 files changed, 37 insertions, 0 deletions
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" + /> + ); +} |
