diff --git a/src/components/blocks/AccordionBlock.tsx b/src/components/blocks/AccordionBlock.tsx
new file mode 100644
index 0000000..c7e6a49
--- /dev/null
+++ b/src/components/blocks/AccordionBlock.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import type { Template } from 'tinacms'
+import { Accordion } from '@mantine/core'
+import { PageBlocksAccordionblock } from '~tina/__generated__/types'
+import { Icon as Iconify } from '@iconify/react'
+
+export const AccordionBlock = ({ data }: { data: PageBlocksAccordionblock }) => {
+ const [activeIndexes, setActiveIndexes] = React.useState
([])
+
+ const toggleIndex = (index: number) => {
+ setActiveIndexes((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]))
+ }
+
+ return (
+
+
+
{data.blockTitle}
+
+ {data.content?.map((item, index) => {
+ return item ? (
+
+
+ ) : (
+
+ )
+ }
+ onClick={() => toggleIndex(index)}
+ >
+ {item.accordionTitle}
+
+ {item.accordionContent}
+
+ ) : null
+ })}
+
+
+