Nuxt UI "Popover" Document Uploader Development

Build a Nuxt UI “popover” [login to view URL] The popover is a NuxtUI & typescript component that provides document uploading, and should contain 3 required fields and an upload button: document name (spaces to underscores) type ( COVER, CV ) this should be configurable from a model file upload The “upload” button, when clicked should place the file on supabase file storage [login to view URL] The file should be stored: bucket [login to view URL] path /{document type/ file {document name}.{file type} So for user 123-456, that want to upload a .pdf of type CV named Software_Dev_CV the file would stored at 123-456/CV/[login to view URL] After the file is uploaded, a record in the database should be created. Table: documents id sequence user_id [login to view URL] created_at current timestamp path 123-456/CV/[login to view URL] type CV name [login to view URL] The NuxtUI component should be usable from a .vue page, and look something like this. It should accept a list of document types, as well as a function that is called after the document is successfully uploaded and saved to supabase, and gives access to the document object created. <FileUploader :document-types=”docTypes” successHandler=”documentUploaded”> <UIcon name=”upload-icon”/> </FileUploader> const docTypes = [ CV, COVER ] function documentUploaded(document) { [login to view URL](successfully uploaded document ${[login to view URL]} of type ${[login to view URL]} to url ${[login to view URL]}) } Deliverables in a .zip file: [login to view URL] creates the documents table (no foreign key necessary) [login to view URL] the NuxtUI component and typescript to make it work [login to view URL] a simple page that uses the FileUploader component