Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState } from 'react';
+import { faqData, FaqItem } from '@/content/faq';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FaqAccordionProps {
+  category: FaqItem['category'];
+}
+
+export const FaqAccordion = ({ category }: FaqAccordionProps) => {
+  const [openId, setOpenId] = useState<string | null>(null);
+  
+  const faqs = faqData.filter(item => item.category === category);
+  
+  if (faqs.length === 0) return null;
+
+  return (
+    <section className="py-16 bg-gray-50">
+      <div className="container mx-auto px-4 md:px-8 max-w-3xl">
+        <div className="text-center mb-10">
+          <h2 className="text-3xl font-bold text-primary mb-4">Często zadawane pytania</h2>
+          <p className="text-gray-600">
+            Odpowiedzi na najczęstsze wątpliwości naszych klientów.
+          </p>
+        </div>
+        
+        <div className="space-y-4">
+          {faqs.map((faq) => {
+            const isOpen = openId === faq.id;
+            return (
+              <div 
+                key={faq.id} 
+                className={cn(
+                  "bg-white border rounded-xl overflow-hidden transition-all duration-200",
+                  isOpen ? "border-accent shadow-md" : "border-gray-200 hover:border-gray-300"
+                )}
+              >
+                <button
+                  className="w-full px-6 py-4 flex items-center justify-between text-left focus:outline-none"
+                  onClick={() => setOpenId(isOpen ? null : faq.id)}
+                  aria-expanded={isOpen}
+                >
+                  <span className="font-semibold text-primary pr-4">{faq.question}</span>
+                  <ChevronDown 
+                    className={cn(
+                      "w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0",
+                      isOpen && "rotate-180 text-accent"
+                    )} 
+                  />
+                </button>
+                
+                <div 
+                  className={cn(
+                    "px-6 text-gray-600 leading-relaxed overflow-hidden transition-all duration-300 ease-in-out",
+                    isOpen ? "max-h-96 pb-5 opacity-100" : "max-h-0 pb-0 opacity-0"
+                  )}
+                >
+                  <div className="pt-2 border-t border-gray-100">
+                    {faq.answer}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};