@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/tabs/tab-1.tsx

@@ -0,0 +1,126 @@
+import {
+  Box,
+  Container,
+  Heading,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Icon,
+  Media,
+  Button,
+} from "@levo-so/studio";
+import React, { useState } from "react";
+
+import { type ITab1Content } from "./tab-1.schema";
+
+const Tab1: React.FC<ILevoBlockBaseProps<ITab1Content>> = ({ content }) => {
+  const [activeIndexes, setActiveIndexes] = useState<{ [key: number]: number }>(
+    {},
+  );
+
+  const handleValueChange = (tabIndex: number, value: string | undefined) => {
+    if (typeof value === "string") {
+      const index = parseInt(value, 10);
+      if (!isNaN(index)) {
+        setActiveIndexes((prev) => ({
+          ...prev,
+          [tabIndex]: index,
+        }));
+      }
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header_wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <TabsRoot defaultValue="0">
+          <Box elementKey="tabs_levoGroup" data-levo_group>
+            <TabsList elementKey={`tabs_tabList`}>
+              {(content.tabs ?? []).map((_: any, index: number) => (
+                <TabsTrigger
+                  value={index.toString()}
+                  key={index}
+                  elementKey={`tabs.${index}.TabsTrigger`}
+                />
+              ))}
+            </TabsList>
+            {(content.tabs ?? []).map((_: any, index: number) => (
+              <TabsContent
+                value={index.toString()}
+                key={index}
+                data-levo_group_item
+                elementKey={`tabs.${index}.tab_content`}
+              >
+                <Box elementKey={`tabs.${index}.content_wrapper`}>
+                  <AccordionRoot
+                    type="single"
+                    elementKey={`tabs.${index}.faqs_levoGroup`}
+                    data-levo_group
+                    defaultValue="0"
+                    onValueChange={(value: string) =>
+                      handleValueChange(index, value)
+                    }
+                  >
+                    {(content.tabs[index]?.faqs ?? []).map(
+                      (_: any, faqIndex: number) => (
+                        <AccordionItem
+                          value={faqIndex.toString()}
+                          key={faqIndex}
+                          elementKey={`tabs.${index}.faqs.${faqIndex}.wrapper`}
+                          data-levo_group_item
+                        >
+                          <AccordionTrigger
+                            elementKey={`tabs.${index}.faqs.${faqIndex}.trigger`}
+                          >
+                            <Box
+                              elementKey={`tabs.${index}.faqs.${faqIndex}.iconQuestionWrapper`}
+                            >
+                              <Icon
+                                elementKey={`tabs.${index}.faqs.${faqIndex}.triggerIcon`}
+                              />
+                              <Typography
+                                elementKey={`tabs.${index}.faqs.${faqIndex}.question`}
+                              />
+                            </Box>
+                          </AccordionTrigger>
+                          <AccordionContent
+                            elementKey={`tabs.${index}.faqs.${faqIndex}.content`}
+                          >
+                            <Typography
+                              elementKey={`tabs.${index}.faqs.${faqIndex}.answer`}
+                            />
+                            <Button
+                              elementKey={`tabs.${index}.faqs.${faqIndex}.cta`}
+                            />
+                          </AccordionContent>
+                        </AccordionItem>
+                      ),
+                    )}
+                  </AccordionRoot>
+                </Box>
+                <Media
+                  elementKey={`tabs.${index}.faqs.${activeIndexes[index] ?? 0}.media`}
+                  alt={`FAQ ${(activeIndexes[index] ?? 0) + 1} Media`}
+                />
+              </TabsContent>
+            ))}
+          </Box>
+        </TabsRoot>
+      </Container>
+    </Section>
+  );
+};
+
+export default Tab1;