Grouped components into folders

client/components/common/Button.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { FC } from 'react';
+
+type ButtonVariants = 'filled' | 'subtle';
+
+interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  variant?: ButtonVariants;
+}
+
+const getStyling = (variant?: ButtonVariants) => {
+  switch (variant) {
+    case 'filled':
+      return 'bg-neutral-700';
+    case 'subtle':
+      return 'hover:bg-neutral-500';
+    default:
+      return 'bg-neutral-700';
+  }
+};
+
+const Button: FC<ButtonProps> = ({ className, variant, ...rest }) => {
+  return <button className={clsx('rounded-md', getStyling(variant), className)} {...rest} />;
+};
+
+export default Button;

client/components/common/InlineLink.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import { FC } from 'react';
+import Link from 'next/link';
+
+export interface InlineLinkProps extends React.ComponentPropsWithoutRef<'span'> {
+  to: string;
+}
+
+const InlineLink: FC<InlineLinkProps> = ({ to, className, ...rest }) => {
+  return (
+    <Link href={to} passHref={true}>
+      <span className={clsx('text-violet-400 cursor-pointer text-sm', className)} {...rest} />
+    </Link>
+  );
+};
+
+export default InlineLink;

client/components/common/Input.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable react/display-name */
+import clsx from "clsx"
+import { forwardRef } from "react"
+
+type InputProps = React.ComponentPropsWithoutRef<"input">
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <input
+        className={clsx(
+          "bg-zinc-700 rounded-md box-border focus:outline outline-violet-400 text-sm",
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      />
+    )
+  },
+)
+
+export default Input

client/components/common/form/FormField.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/display-name */
+import { forwardRef, ReactNode } from "react"
+
+import Input from "../Input"
+
+interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+  label?: string
+  bottomElement?: ReactNode
+}
+
+const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  ({ label, bottomElement, hidden, ...inputProps }, ref) => {
+    return (
+      <div className="space-y-1">
+        <label htmlFor={inputProps.id} className="font-semibold text-sm">
+          {label}
+        </label>
+        <Input {...inputProps} ref={ref} />
+        {bottomElement}
+      </div>
+    )
+  },
+)
+
+export default FormField

client/components/common/form/SubmitButton.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx"
+import { FC } from "react"
+
+type ButtonProps = React.ComponentPropsWithoutRef<"input">
+
+const SubmitButton: FC<ButtonProps> = ({ className, ...rest }) => {
+  return (
+    <input
+      type="submit"
+      className={clsx(
+        "cursor-pointer rounded-md bg-violet-500 font-semibold py-2 text-sm",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export default SubmitButton