Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

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

Browse source
This commit is contained in:
Marco Pedone 2025-08-10 17:09:56 +02:00
parent 19594637e7
commit b4bb786ebc
2 changed files with 39 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/infoalloggi/src/components/servizio/annuncio_card.tsx
View file

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

48
apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
View file

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