vrr/HelperScripts-for-ProxmoxVE
2
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-09-14 03:09:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Implement FAQ component and integrate it into the main page (#3709)

Browse source 
* Implement FAQ component and integrate it into the main page; update package-lock.json for development dependencies.

* Adjust Footer component padding for improved layout consistency

* Update FAQ section div to include an ID for improved accessibility and navigation

* Adjust ScriptAccordion max height for improved layout consistency

* Remove default value from Accordion in FAQ component

* Refactor FAQ items for clarity and consistency; update titles and content for improved user understanding.

* Refactor FAQ component to use index as key for Accordion items; remove IDs from FAQ_Items for simplified mapping.
This commit is contained in:
Bram Suurd 2025-04-06 22:28:04 +02:00 • committed by GitHub
parent 427ce771d7
commit 4ef88cd051
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 177 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/components/FAQ.tsx Normal file
View file

@ -0,0 +1,29 @@
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { Plus } from "lucide-react";
import { FAQ_Items } from "../config/faqConfig";
import { Accordion, AccordionContent, AccordionItem } from "./ui/accordion";
export default function FAQ() {
return (
<div className="space-y-4">
<Accordion type="single" collapsible className="w-full">
{FAQ_Items.map((item, index) => (
<AccordionItem value={index.toString()} key={index} className="py-2">
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger className="flex flex-1 items-center gap-3 py-2 text-left text-[15px] font-semibold leading-6 transition-all [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&>svg]:-order-1 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180">
{item.title}
<Plus
size={16}
strokeWidth={2}
className="shrink-0 opacity-60 transition-transform duration-200"
aria-hidden="true"
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionContent className="pb-2 ps-7 text-muted-foreground">{item.content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
);
}