wip

midday-ai · Oct 24, 2024 · 9b599c7 · 9b599c7
1 parent 7fc5993
commit 9b599c7
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/apps/dashboard/src/components/invoice/logo.tsx b/apps/dashboard/src/components/invoice/logo.tsx
@@ -3,6 +3,7 @@
 import type { InvoiceFormValues } from "@/actions/invoice/schema";
 import { updateInvoiceTemplateAction } from "@/actions/invoice/update-invoice-template-action";
 import { useUpload } from "@/hooks/use-upload";
+import { Icons } from "@midday/ui/icons";
 import { Skeleton } from "@midday/ui/skeleton";
 import { useToast } from "@midday/ui/use-toast";
 import { useAction } from "next-safe-action/hooks";
@@ -41,16 +42,32 @@ export function Logo({ teamId }: { teamId: string }) {
   };
 
   return (
-    <div className="relative size-[78px]">
+    <div className="relative size-[78px] group">
       <label htmlFor="logo-upload" className="absolute inset-0">
         {isLoading ? (
           <Skeleton className="w-full h-full" />
         ) : logoUrl ? (
-          <img
-            src={logoUrl}
-            alt="Invoice logo"
-            className="w-full h-full object-cover"
-          />
+          <>
+            <img
+              src={logoUrl}
+              alt="Invoice logo"
+              className="w-full h-full object-cover"
+            />
+            <button
+              type="button"
+              className="absolute inset-0 bg-black bg-opacity-50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity flex-col gap-1"
+              onClick={(e) => {
+                e.preventDefault();
+                setValue("template.logo_url", undefined, {
+                  shouldValidate: true,
+                });
+                updateInvoiceTemplate.execute({ logo_url: null });
+              }}
+            >
+              <Icons.Clear className="size-4" />
+              <span className="text-xs font-medium">Remove</span>
+            </button>
+          </>
         ) : (
           <div className="size-[78px] bg-[repeating-linear-gradient(-60deg,#DBDBDB,#DBDBDB_1px,background_1px,background_5px)] dark:bg-[repeating-linear-gradient(-60deg,#2C2C2C,#2C2C2C_1px,background_1px,background_5px)]" />
         )}