Marco Pedone
d7bfd8fdf1
- Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication. - Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout. - Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling. - Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling. - Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage. - Refactored global CSS variables for improved color management and added new color variables for better theme support. - Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance.
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { forwardRef, type InputHTMLAttributes } from "react";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import type { Faq } from "~/i18n/locales";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
interface AccordionCompProps extends InputHTMLAttributes<HTMLDivElement> {
|
|
texts: Faq[];
|
|
defaultOpen?: number;
|
|
}
|
|
|
|
/**
|
|
* Renders an accordion component with collapsible items.
|
|
*
|
|
* @component
|
|
* @example
|
|
* ```tsx
|
|
* <AccordionComp
|
|
* texts={[
|
|
* { title: "Item 1", description: "Description for Item 1" },
|
|
* { title: "Item 2", description: "Description for Item 2" },
|
|
* { title: "Item 3", description: "Description for Item 3" },
|
|
* ]}
|
|
* className="my-4"
|
|
* />
|
|
* ```
|
|
*/
|
|
export const AccordionComp = forwardRef<HTMLDivElement, AccordionCompProps>(
|
|
({ texts, defaultOpen, className }, ref) => {
|
|
if (!texts || texts.length === 0) {
|
|
return null; // Return null if no texts are provided
|
|
}
|
|
return (
|
|
<div
|
|
className={cn("mx-auto flex max-w-xl justify-center", className)}
|
|
ref={ref}
|
|
>
|
|
<Accordion
|
|
className="w-full"
|
|
collapsible
|
|
defaultValue={
|
|
defaultOpen !== undefined ? `item-${defaultOpen}` : undefined
|
|
}
|
|
type="single"
|
|
>
|
|
{texts.map((text, index) => (
|
|
<AccordionItem
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <index is safe here>
|
|
key={`ac-item-${index}`}
|
|
value={`item-${index}`}
|
|
>
|
|
<AccordionTrigger className="cursor-pointer gap-4 text-left text-lg">
|
|
{text.title}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-base">
|
|
{text.description}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
AccordionComp.displayName = "AccordionComp";
|