Add accordion component

src/renderer/components/accordion/index.tsx

@@ -0,0 +1,25 @@
+import {
+  Accordion as MantineAccordion,
+  AccordionProps as MantineAccordionProps,
+} from '@mantine/core';
+import styled from 'styled-components';
+
+type AccordionProps = MantineAccordionProps;
+
+const StyledAccordion = styled(MantineAccordion)`
+  & .mantine-Accordion-panel {
+    background: var(--paper-bg);
+  }
+
+  .mantine-Accordion-control {
+    background: var(--paper-bg);
+  }
+`;
+
+export const Accordion = ({ children, ...props }: AccordionProps) => {
+  return <StyledAccordion {...props}>{children}</StyledAccordion>;
+};
+
+Accordion.Control = StyledAccordion.Control;
+Accordion.Item = StyledAccordion.Item;
+Accordion.Panel = StyledAccordion.Panel;

src/renderer/components/index.ts

@@ -16,3 +16,4 @@ export * from './scroll-area';
 export * from './paper';
 export * from './tabs';
 export * from './slider';
+export * from './accordion';