set up admin api

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/form/file-input.tsx

@@ -1,5 +1,5 @@
 import { PhotoIcon } from '@heroicons/react/24/outline';
-import { useId } from 'react';
+import { ChangeEvent, useId, useState } from 'react';
 
 type FileInputProps = {
   name: string;
@@ -8,6 +8,14 @@ type FileInputProps = {
 
 const FileInput = ({ name, label }: FileInputProps) => {
   const id = useId();
+  const [file, setFile] = useState<File | undefined>();
+
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setFile(e.target.files[0]);
+    }
+  };
+
   return (
     <div>
       <label className="block text-sm font-medium leading-6 text-gray-900">{label}</label>
@@ -17,15 +25,16 @@ const FileInput = ({ name, label }: FileInputProps) => {
           <div className="mt-2 flex text-sm leading-6 text-gray-600">
             <label
               htmlFor={id}
-              className="relative cursor-pointer rounded-md bg-white font-semibold text-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2"
+              className="relative cursor-pointer rounded-md bg-white font-semibold text-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70 focus-within:ring-offset-2"
             >
               <span>Upload a file</span>
-              <input id={id} name={name} type="file" className="sr-only" />
+              <input id={id} name={name} type="file" className="sr-only" onChange={onFileChange} />
             </label>
             <p className="pl-1">or drag and drop</p>
           </div>
         </div>
       </div>
+      {file && <p className="mt-2 text-sm text-gray-500">{file.name}</p>}
     </div>
   );
 };

components/orders/mobile-order-actions.tsx

@@ -44,8 +44,9 @@ const MobileOrderActions = ({ order }: { order: Order }) => {
                 <Button
                   className={clsx(
                     focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                    'block px-4 py-2 text-sm'
+                    'flex w-full px-4 py-2 text-sm'
                   )}
+                  onClick={() => setIsOpen(true)}
                 >
                   Activate Warranty
                 </Button>