Identity creation flow

src/components/DocumentUpload.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, useState } from "react";
+import { UploadIcon, CheckCircle, Trash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatFileSize, truncateFileName } from "@/utils";
+
+export type DocumentUploadProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const DocumentUpload = forwardRef<HTMLInputElement, DocumentUploadProps>(
+  ({ className, id, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [fileName, setFileName] = useState<string | null>(null);
+    const [fileSize, setFileSize] = useState<number | null>(null);
+    const [progress, setProgress] = useState(0);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        setFileName(truncateFileName(file.name));
+        setFileSize(file.size);
+        setProgress(0);
+        uploadFile(file);
+      }
+    };
+
+    const clearFileSelection = () => {
+      setFileName(null);
+      setFileSize(null);
+      setProgress(0);
+      if (ref && typeof ref === "object" && ref.current) {
+        ref.current.value = "";
+      }
+    };
+
+    const uploadFile = async (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      // todo: replace the endpoint with the actual upload endpoint
+      const response = await fetch("/upload-endpoint", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        console.log("Upload complete");
+        setProgress(100);
+      } else {
+        console.error("Upload failed");
+      }
+    };
+
+    return (
+      <div className="flex flex-col items-center gap-3">
+        <div className="relative w-full flex flex-col items-center">
+          <input
+            type="file"
+            id={id}
+            className={cn(
+              "absolute inset-0 h-full w-full opacity-0 cursor-pointer",
+              className
+            )}
+            ref={ref}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChange={handleFileChange}
+            {...props}
+          />
+
+          <div
+            className={cn(
+              "flex flex-col items-center gap-3 w-full rounded-[12px] border bg-elevation-200 px-4 pt-4 pb-4",
+              isFocused ? "border-[#1B0F004D]" : "border-[#1B0F0014]"
+            )}
+          >
+            <div className="w-9 h-9 flex items-center justify-center rounded-full bg-divider-100">
+              <UploadIcon
+                className="text-[#1B0F00]"
+                width={16}
+                strokeWidth={1}
+              />
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <span className="text-sm font-medium text-foreground">
+                Upload your identity document
+              </span>
+              <span className="text-[12px] text-[#1B0F0080]">
+                PNG or JPG (Max. 5mb)
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {fileName && (
+          <div className="w-full p-4 border border-[#1B0F0014] rounded-[12px] bg-[#EEEBE3] flex flex-col gap-2 pointer-events-auto">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-sm font-medium text-text-300">
+                    {fileName}
+                  </span>
+
+                  <span className="text-xs text-[#1B0F0080]">
+                    {formatFileSize(fileSize || 0)}
+                  </span>
+                </div>
+
+                <CheckCircle color="#006F29" width={16} />
+              </div>
+
+              <Trash
+                color="#1B0F00"
+                width={16}
+                strokeWidth={1}
+                className="cursor-pointer"
+                onClick={clearFileSelection}
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <div className="w-full bg-[#D1CCC1] rounded-[8px] h-2 overflow-hidden">
+                <div
+                  className="bg-green-500 h-full"
+                  style={{ width: `${progress}%` }}
+                ></div>
+              </div>
+              <span className="text-sm text-text-300">{progress}%</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+DocumentUpload.displayName = "DocumentUpload";
+
+export { DocumentUpload };

src/components/ui/input.tsx

@@ -1,25 +1,70 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { forwardRef, useState } from "react";
+import { cn } from "@/lib/utils";
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  required?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, label, required = false, id, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [hasValue, setHasValue] = useState(false);
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      setHasValue(!!e.target.value);
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setHasValue(!!e.target.value);
+    };
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
+      <div className="relative">
+        <input
+          type={type}
+          id={id}
+          className={cn(
+            "peer flex h-[58px] w-full rounded-[8px] border bg-elevation-200 px-4 text-sm transition-all duration-200 ease-in-out outline-none focus:outline-none",
+            "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-0",
+            isFocused ? "border-[#1B0F004D]" : "border-[#1B0F0014]",
+            isFocused || hasValue ? "pt-6 pb-2" : "pt-5 pb-3",
+            className
+          )}
+          ref={ref}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          {...props}
+        />
+        <label
+          htmlFor={id}
+          className={cn(
+            "absolute left-4 transition-all duration-200 ease-out flex items-center",
+            "text-text-300 font-medium text-sm",
+            isFocused || hasValue
+              ? "top-2 text-[12px] text-[#1B0F0080]"
+              : "top-1/2 -translate-y-1/2"
+          )}
+        >
+          {label}
+          {required && (
+            <span
+              className={cn(
+                "text-[12px]",
+                isFocused || hasValue ? "text-[#1B0F0080]" : "text-[#8D0002]"
+              )}
+            >
+              *
+            </span>
+          )}
+        </label>
+      </div>
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };