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

feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements

Browse source
This commit is contained in:
Marco Pedone 2025-08-29 09:58:44 +02:00
parent 3f82763168
commit 17b8aaf7f5
3 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/infoalloggi/src/components/codiceRicerca.tsx
View file

@ -14,10 +14,12 @@ export const CodiceBox = ({
className,
optionBoxClassName,
optionsClassName,
containerClassName,
}: {
className?: string;
optionBoxClassName?: string;
optionsClassName?: string;
containerClassName?: string;
}) => {
const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery();
const { locale } = useTranslation();
@ -30,6 +32,7 @@ export const CodiceBox = ({
className={className}
optionBoxClassName={optionBoxClassName}
optionsClassName={optionsClassName}
containerClassName={containerClassName}
/>
);
};
@ -40,6 +43,7 @@ type SearchBoxProps = {
className?: string;
optionBoxClassName?: string;
optionsClassName?: string;
containerClassName?: string;
};
const AutocompleteSearchBox = ({
@ -48,6 +52,7 @@ const AutocompleteSearchBox = ({
className,
optionBoxClassName,
optionsClassName,
containerClassName,
}: SearchBoxProps) => {
const router = useRouter();
const [open, setOpen] = useState<boolean>(false);
@ -73,7 +78,12 @@ const AutocompleteSearchBox = ({
return (
<div ref={wrapperRef} className="z-[5000] w-full">
<div className="relative flex w-full items-center justify-center rounded-md bg-white">
<div
className={cn(
"relative flex w-full items-center justify-center rounded-md bg-white",
containerClassName,
)}
>
<label htmlFor="search" className="sr-only">
Search Box
</label>

2
apps/infoalloggi/src/components/svgs.tsx
View file

@ -22,7 +22,7 @@ export const HeroSvg = (props: SVGProps<SVGSVGElement>) => (
<path d="m240.441 33.238-137.11 142.594v32.906l137.11-137.109 148.078 148.078V186.8L240.441 33.238Z" />
<path
d="M417.509 184.53 255.95 22.972l-7.755-7.756c-4.28-4.288-11.228-4.288-15.509 0l-7.755 7.756-150.59 150.589c-4.288 4.281-4.288 11.23 0 15.51l7.755 7.755c4.281 4.288 11.229 4.288 15.51 0L240.441 54.013l153.793 153.793c4.28 4.288 11.228 4.288 15.509 0l7.755-7.755c4.286-4.284 4.292-11.231.011-15.521Z"
fill="#EF4D4D"
fill="#fb2c36"
/>
<path
d="M152.088 362.3a43.409 43.409 0 0 0 6.087-21.937c0-33.775-36.563-54.884-65.813-37.997a43.877 43.877 0 0 0-21.937 37.997c0 8.029 2.315 15.455 6.087 21.937h75.576Zm225.462-65.812a43.788 43.788 0 0 0-39.839 25.722 32.515 32.515 0 0 0-15.005-3.785c-18.173 0-32.906 14.733-32.906 32.907 0 3.872.79 7.524 2.018 10.968h123.53a43.5 43.5 0 0 0 6.077-21.937c0-24.231-19.644-43.875-43.875-43.875Z"

69
apps/infoalloggi/src/pages/index.tsx
View file

@ -62,11 +62,15 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
</Link>
<div className="relative mx-auto flex w-full gap-2">
<div className="relative mx-auto flex w-full gap-2 p-1 items-center justify-center">
<CodiceBox
key={"codiceBox"}
className="rounded-md placeholder:text-center "
optionBoxClassName="left-0"
/>
<div className="absolute w-full h-full overflow-clip rounded-lg pointer-events-none">
<div className="animate-ping w-full h-full bg-green-400 pointer-events-none" />
</div>
</div>
</div>
</div>
@ -76,41 +80,60 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
const FrequentSearches = () => {
const { locale } = useTranslation();
return (
<Card className="mx-auto mb-4 max-w-4xl gap-4 bg-sky-300">
<Card className="mx-auto mb-4 max-w-4xl gap-4 shadow-none border-0 ">
<CardHeader>
<CardTitle className="text-center text-xl font-bold">
<CardTitle className="text-center text-3xl sm:text-2xl font-bold text-primary">
{locale === "en" ? "Frequent Searches" : "Ricerche frequenti"}
</CardTitle>
</CardHeader>
<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-0 sm:px-4">
<Link href="/annunci?comune=Bassano+del+Grappa">
<Button className="flex items-center gap-2 text-lg">
Affitti Bassano del Grappa
<ArrowRight />
</Button>
</Link>
<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-2 sm:px-6">
<Link href="/annunci?tipo=Transitorio">
<Button className="flex items-center gap-2 text-lg">
Affitti Transitori
<ArrowRight />
</Button>
</Link>
<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
<Button className="flex items-center gap-2 text-lg">
Affitti Transitori Bassano
<Button
size="lg"
variant="flat"
className="flex items-center gap-1 text-lg bg-transitorio text-black border-2 border-white"
>
Transitori
<ArrowRight />
</Button>
</Link>
<Link href="/annunci?tipo=Stabile">
<Button className="flex items-center gap-2 text-lg">
Affitti Stabili
<Button
size="lg"
variant="flat"
className="flex items-center gap-1 text-lg bg-stabile text-black border-2 border-whiteborder-2 border-white"
>
Stabili
<ArrowRight />
</Button>
</Link>
<Link href="/annunci?comune=Bassano+del+Grappa">
<Button
size="lg"
className="flex items-center gap-1 text-lg border-2 border-white"
>
Bassano del Grappa
<ArrowRight />
</Button>
</Link>
<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
<Button
size="lg"
variant="flat"
className="flex items-center gap-1 text-lg bg-transitorio text-black border-2 border-white"
>
Transitori Bassano
<ArrowRight />
</Button>
</Link>
<Link href="/annunci?comune=Marostica">
<Button className="flex items-center gap-2 text-lg">
Affitti Marostica
<Button
size="lg"
className="flex items-center gap-1 text-lg border-2 border-white"
>
Marostica
<ArrowRight />
</Button>
</Link>