File Input

import { FileInput } from "@/components/ui/file-input";

export default function Example() {
  return <FileInput />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const FileInput = forwardRef(({ className, ...props }, ref) => {
  return (
    <div className={cn("grid w-full gap-1.5", className)}>
      <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-background hover:bg-accent/50 transition-colors">
        <div className="flex flex-col items-center justify-center pt-5 pb-6">
          <svg className="w-8 h-8 mb-2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
            <path strokeLinecap="round" strokeLinejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          <p className="mb-1 text-sm text-muted-foreground"><span className="font-semibold">Click to upload</span> or drag and drop</p>
          <p className="text-xs text-muted-foreground">PNG, JPG, PDF up to 10MB</p>
        </div>
        <input ref={ref} type="file" className="hidden" {...props} />
      </label>
    </div>
  );
});
FileInput.displayName = "FileInput";

export { FileInput };