Refactor AnnuncioCard and servizio_annunci_accordions to pass actions and interactions as props for better component flexibility

apps/infoalloggi/src/components/servizio/annuncio_card.tsx

@@ -27,21 +27,28 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "~/components/ui/carousel";
+import { AnnuncioActions } from "~/components/servizio/annuncio_actions";
 
 export const AnnuncioCard = ({ className }: { className?: string }) => {
   const { data } = useServizioAnnuncio();
 
   return (
-    <BasicAnnuncioCard data={data} className={className}>
-      <Interactions />
-    </BasicAnnuncioCard>
+    <BasicAnnuncioCard
+      data={data}
+      className={className}
+      actions={<AnnuncioActions />}
+      interactions={<Interactions />}
+    />
   );
 };
 export const BasicAnnuncioCard = ({
+  actions,
+  interactions,
   className,
   data,
-  children,
 }: {
+  actions?: React.ReactNode;
+  interactions?: React.ReactNode;
   className?: string;
   data: Pick<
     Annunci,
@@ -58,7 +65,6 @@ export const BasicAnnuncioCard = ({
     | "stato"
     | "web"
   >;
-  children: React.ReactNode;
 }) => {
   const { t } = useTranslation();
 
@@ -66,6 +72,7 @@ export const BasicAnnuncioCard = ({
     <Card className={cn("w-full border-white", className)}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
         <CardTitle className="text-xl">Codice: {data.codice}</CardTitle>
+        {actions}
       </CardHeader>
       <CardContent className="px-4">
         <div className="flex w-full flex-col gap-4 md:flex-row md:gap-10">
@@ -82,7 +89,7 @@ export const BasicAnnuncioCard = ({
             alt={data.codice}
           />
           <div className="flex w-full flex-col gap-5">
-            {children}
+            {interactions}
 
             <div className="flex flex-wrap items-center gap-3">
               <TipoBadge tipo={data.tipo} />

apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx

@@ -140,16 +140,19 @@ export const AnnunciCompatibili = () => {
                     key={a.id}
                     data={a}
                     className="border-2 border-neutral-500"
-                  >
-                    {isAdmin ? (
-                      <AddButton annuncioId={a.id} />
-                    ) : (
-                      <InteressatoButtonBatchV
-                        annuncioId={a.id}
-                        hasInterest={userIntrests?.includes(a.id) || false}
-                      />
-                    )}
-                  </BasicAnnuncioCard>
+                    interactions={
+                      <>
+                        {isAdmin ? (
+                          <AddButton annuncioId={a.id} />
+                        ) : (
+                          <InteressatoButtonBatchV
+                            annuncioId={a.id}
+                            hasInterest={userIntrests?.includes(a.id) || false}
+                          />
+                        )}
+                      </>
+                    }
+                  />
                 );
               })
             )}
@@ -198,18 +201,19 @@ export const AnnunciRichiesti = ({ userId }: { userId: UsersId }) => {
                     className="w-full border-2 border-pink-500"
                     data={a}
                     key={a.id}
-                  >
-                    <Button
-                      onClick={() => {
-                        deleteAnnuncio({ annuncioId: a.id, userId });
-                      }}
-                      className="flex items-center gap-2"
-                      variant="destructive"
-                    >
-                      Rimuovi
-                      <Trash2 className="size-4" />
-                    </Button>
-                  </BasicAnnuncioCard>
+                    interactions={
+                      <Button
+                        onClick={() => {
+                          deleteAnnuncio({ annuncioId: a.id, userId });
+                        }}
+                        className="flex items-center gap-2"
+                        variant="destructive"
+                      >
+                        Rimuovi
+                        <Trash2 className="size-4" />
+                      </Button>
+                    }
+                  />
                 );
               })
             )}