Neohuncho/add custom sounds v2

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

app/renderer/src/components/Collapse.tsx

@@ -1,16 +1,23 @@
+import { SVG } from "components";
 import React, { useState } from "react";
 import {
   StyledCollapse,
-  StyledCollapseHeading,
   StyledCollapseContent,
+  StyledCollapseContentResponsive,
+  StyledCollapseHeading,
 } from "styles";
-import { SVG } from "components";
 
 type Props = {
   children?: React.ReactNode;
+  title?: string;
+  heightResponsive?: boolean;
 };
 
-const Collapse: React.FC<Props> = ({ children }) => {
+const Collapse: React.FC<Props> = ({
+  children,
+  title,
+  heightResponsive = false,
+}) => {
   const [open, setOpen] = useState(false);
 
   const toggleCollapse = () => {
@@ -19,17 +26,25 @@ const Collapse: React.FC<Props> = ({ children }) => {
 
   return (
     <StyledCollapse>
-      <StyledCollapseHeading
-        as={"button"}
-        open={open}
-        onClick={toggleCollapse}
-      >
-        Notification Types
-        <SVG name="chevron-down" />
-      </StyledCollapseHeading>
-      {open && (
-        <StyledCollapseContent>{children}</StyledCollapseContent>
+      {title && (
+        <StyledCollapseHeading
+          as={"button"}
+          open={open}
+          onClick={toggleCollapse}
+        >
+          {title}
+          <SVG name="chevron-down" />
+        </StyledCollapseHeading>
       )}
+      {open ? (
+        heightResponsive ? (
+          <StyledCollapseContentResponsive>
+            {children}
+          </StyledCollapseContentResponsive>
+        ) : (
+          <StyledCollapseContent>{children}</StyledCollapseContent>
+        )
+      ) : null}
     </StyledCollapse>
   );
 };

app/renderer/src/components/index.ts

@@ -4,27 +4,27 @@ export { default as RangeLabel } from "./RangeLabel";
 export { default as RangeSlider } from "./RangeSlider";
 export { default as Time } from "./Time";
 
+export { default as Help } from "./Help";
+export { default as Shortcut } from "./Shortcut";
 export * from "./Toggler";
 export { default as Toggler } from "./Toggler";
-export { default as Shortcut } from "./Shortcut";
-export { default as Help } from "./Help";
 
 export { default as Header } from "./Header";
 
 export * from "./SVG";
 export { default as SVG } from "./SVG";
 
-export { default as Portal } from "./Portal";
 export { default as Dimmer } from "./Dimmer";
+export { default as Portal } from "./Portal";
 
 export { default as Checkbox } from "./Checkbox";
 export { default as Radio } from "./Radio";
 
 export { default as Collapse } from "./Collapse";
 
 export { default as Alert } from "./Alert";
-export { default as Updater } from "./Updater";
 export { default as NavNotify } from "./NavNotify";
+export { default as Updater } from "./Updater";
 
 export * from "./Popper";
 export * from "./Preloader";