first commit

calcom/apps/web/components/ui/form/MinutesField.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import React, { forwardRef } from "react";
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  label?: ReactNode;
+};
+
+const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
+  return (
+    <div className="block sm:flex">
+      {!!label && (
+        <div className="min-w-48 mb-4 sm:mb-0">
+          <label htmlFor={rest.id} className="text-default flex h-full items-center text-sm font-medium">
+            {label}
+          </label>
+        </div>
+      )}
+      <div className="w-full">
+        <div className="relative rounded-sm">
+          <input
+            {...rest}
+            ref={ref}
+            type="number"
+            className={classNames(
+              "border-default block w-full rounded-sm pl-2 pr-12 text-sm",
+              rest.className
+            )}
+          />
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <span className="text-subtle text-sm" id="duration">
+              mins
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+MinutesField.displayName = "MinutesField";
+
+export default MinutesField;